我有一个层次结构如下：
<div class="outer">
<h1>Heading</h1>
<p>Paragraph</p>
<p><a>Link</a></p>
<div class="inner">
<h1>Heading</h1>
<p>Paragraph</p>
<p><a>Link</a></p>
</div>
</div>
我希望outerdiv 中的元素以某种方式设置样式，并且innerdiv 中的元素以另一种方式设置样式。
但是，我不想通过对规则定义inner的每个属性进行重置来污染我的元素规则。outer
在以下示例中，我想避免margin: 0px. 请注意，当然，我的样式表要复杂得多，并且重置次数会更多且烦人。
outer a { margin: 5px; }
inner a { margin: 0px; color: orange; }
我最初的反应是使用直接子选择器>，但这对于链接、强、跨度等来说变得很麻烦。
下面的例子：
outer > a { color: orange; }
不会风格：
<div class="outer"><p><a>Link</a></p></div>
<div class="outer"><strong><a>Link</a></strong></div>
<div class="outer"><ul><li><a>Link</a></li></ul></div>
<div class="outer"><table><tr><td><a>Link</a></td></tr></table></div>
...
我需要找到其他方法
- 在 处打破层次结构
inner，而不明确定义重置。 - 将外部样式的范围限制在
inner.
这可能吗？请注意，在当前情况下，无法重新排列我的 HTML 结构。