html - 在div中动态添加图片

Question

我有一个下拉列表，它将在类名称为 DrugNameCard 且 ID 为 testDiv 的 div 中动态添加图像元素。通过下面的所有尝试，HTML 都没有监听 CSS。我在这里错过了什么？

CSS - 各种失败的尝试

body {
}.DrugNameCard
{
    height:3.85in;
    width: 2.625in;
    border: 5px solid black;
    padding-right:.25in;
    padding-left:.25in;
    padding-top:.25in;

}
img  div.DrugNameCard
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}


img > div.DrugNameCard
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}
img > .DrugNameCard
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}
img  .DrugNameCard
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}
img #testDiv
{
   height:.64in;
   width: .64in;
   padding-left: .1in;
}

HTML

    <select name="DropDownList2" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;DropDownList2\&#39;,\&#39;\&#39;)&#39;, 0)" id="DropDownList2">
    <option selected="selected" value="-1">Select picture to add</option>
    <option value="Images/bandAid.jpg">BandAid</option>
    <option value="Images/Confusion.jpg">Confusion</option>
    <option value="Images/sadFace.jpg">Depression</option>
    <option value="Images/sleepiness.jpg">Sleepiness</option>

</select>
    <br />
    <div id="testDiv" class="DrugNameCard">

    <img src="Images/Confusion.jpg" /><img src="Images/sleepiness.jpg" /><img src="Images/sadFace.jpg" /></div>
    <input type="submit" name="btnSubMitDrugName" value="Submit Drug Name" id="btnSubMitDrugName" />

Answer 1

您正在反转 CSS 选择器。

  img > div.DrugNameCard

上面这行实际上意味着:所有 div 和 DrugNameCard 类都是 img 元素的直接子元素，而实际上你需要的是相反的:

  div.DrugNameCard > img