Question

我有一个下拉列表，它会在div中动态添加图像元素，类名为DrugNameCard，ID为testDiv。通过以下所有尝试，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

Answer 2

我认为你已经向后退了元素选择器。应该是：

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

在div中动态添加图片

2 个答案: