假设您正在构建一个名为 Awesome Widget 的概念性小部件，并且您希望完全保护它不与周围元素或作为小部件内的内容驻留的子元素发生冲突。

我们不想要什么

div ul li {}

解决方案 1：CSS 子组合器

使用 CSS 子级组合器选择器来指定仅应将直接子级作为目标。

.awesomewidget > div > ul > li {}

解决方案2：类命名空间

使用 aw (Awesome Widget) 作为每个类的命名空间，减少页面上任何其他元素使用该确切命名空间 + 类名的机会。

.awesomewidget .aw-container .aw-list .aw-listitem {}

CSS 中还有类似 @namespace 的东西，但这仅适用于 XML。

除了方案1和方案2之外，还有其他方案可以使用吗？您更喜欢哪一个？有什么最佳实践吗？

编辑：没有适当的命名空间/样式冲突预防而出现的问题的示例

小部件样式：

.awesomewidget > div ul li {
background-color:red;
}

用户造型：

ul li {
background-color:blue;
}

Markup:

<div class="awesomewidget">
<div>

<ul>
<li>
<!-- user content starts here -->

<p>I am the user and I want to add some content here. Let's add a list:</p>

<ul>
<li>Why is this list-item red and not blue?</li>
</ul>

<!-- user content ends here -->
</li>
<li>
<!-- user content starts here -->

<!-- user content ends here -->
</li>
</ul>

</div>
</div>

我更愿意结合使用两种解决方案，例如：

.awesomewidget > div ul li {}

因为第二个给标记增加了很多不必要的权重。

Update

对于您的示例，我将使用类在用户内容周围添加一个包装器.user然后在 CSS 前面添加.user。然而，这并不优雅，它增加了一些标记，而且我认为它很容易失败。