Question

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

Answer 1

选择器 .innerImg img 指的是一个img元素 inside 一个带有innerImg类的元素。你的文件里没有这样的东西。

您可能想要的是img.innerImg。

除此之外，还有selector specificity的简短计算，用于确定遵循的规则。（该链接在任何文档中都包含我最喜欢的限定符：“在具有大基数的数字系统中”）

Answer 2

我怀疑这个结果接近你想要的。

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

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

2 个答案: