使用 CSS 选择器的目的

比起努力运用选择器定位到某元素，更好的办法是给你想要添加样式的元素直接添加一个 class。我们以 .header ul {} 这样一个选择器为例。

假定这个 ul 就是这个网站的全站导航，它位于 header 中，而且目前为止是 header 中唯一的 ul 元素。.header ul{} 的确可以生效，但是这样并不是好方法，它很容易过时，而且非常晦涩。如果我们在 header 中再添加一个 ul 的话，它就会套用我们给这个导航部分写的样式，哪怕我们设想的不是这个效果。这意味着我们要么要重构许多代码，要么给后面的 ul 新写许多样式来抵消之前的影响。

你的选择器必须符合你要给这个元素添加样式的原因。思考一下，「我定位到这个元素，是因为它是 .header 下的 ul，还是因为它是我的网站导航？」这将决定你应当如何使用选择器。

确保你的核心选择器不是类型选择器，也不是高级对象或抽象选择器。例如你在我们的 CSS 中肯定找不到诸如 .sidebar ul {} 或者 .footer .media {} 这样的选择器。

表达清晰：直接找到你要添加样式的元素，而非其亲元素。不要想当然地认为 HTML 不会改变。用 CSS 直接命中你需要的元素，而非投机取巧。

完整内容请参考我的文章 Shoot to kill; CSS selector intent