1

我正在尝试创建一个仅针对我的控件的 CSS 重置。所以 HTML 看起来像这样：

<body>
  <img class="outterImg" src="sadkitty.gif" />
  <div id="container" class="container">
    <img class="innerImg" src="sadkitty.gif" />
    <div class="subContainer">
      <img class="innerImg" src="sadkitty.gif" />
    </div>
  </div>
  <img class="outterImg" src="sadkitty.gif" />
</body>

CSS是我遇到的麻烦，但我目前正在处理这个：

img 
{
  // Bad style declarations for the entire page
  border: solid 3px red;  
  width: 50px;
}

.container img, .container div, .container etc.
{
  // Style reset for specific elements within my control "container"
  border: solid 3px blue;
  width: 100px;
}

.innerImg img
{
  // The target style for the specific class/element within the control
  border: solid 3px green;
  width: 200px;
}

问题是“.innerImg img”没有像我期望的那样覆盖“.container img”。那么，重置“容器”元素中所有元素的样式，然后在该元素中的类上放置样式的最佳方法是什么？

4

2 回答 2

3

选择器 引用类为 innerImg 的元素内.innerImg img 的 img 元素。您的文档中没有类似的内容。

你可能想要的是img.innerImg.

除此之外，还有一个用于确定遵循哪个规则的选择器特异性的简短计算。（该链接在任何文档中都包含我最喜欢的新限定词：“in a number system with a large base”）

于 2008-12-02T17:33:27.650 回答
0

我怀疑这会导致接近您想要的结果。 

img  
{  
  border: solid 3px red;  
  width: 50px;  
}  
.container .innerImg, .container div  
{  
  border: solid 3px blue;  
  width: 100px;  
}  
.container .subContainer  
{  
  border: none;  
}  
.subContainer .innerImg  
{  
  border: solid 3px green;  
  width: 200px;  
}
于 2008-12-02T17:28:50.280 回答