仅为 DOM 的一部分创建样式重置的最佳方法是什么？答案

【问题标题】：What's the best way to create a style reset for only a portion of the DOM?仅为 DOM 的一部分创建样式重置的最佳方法是什么？
【发布时间】：2010-09-24 23:36:43
【问题描述】：

我正在尝试创建一个仅针对我的控件的 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”。那么，重置“容器”元素中所有元素的样式，然后在该元素中的类上放置样式的最佳方法是什么？

【问题讨论】：

标签： css css-reset css-specificity

【解决方案1】：

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

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;  
}

【讨论】：

【解决方案2】：

选择器 .innerImg img 指一个 img 元素 inside 一个具有类 innerImg 的元素。您的文档中没有类似的内容。

你可能想要的是img.innerImg。

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

【讨论】：