jquery - 如何分层特异性

Question

在 http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/ 的帖子中

在定义“特异性”规则的上下文中声明:

For example, if you want to change the background color of all the div elements that are posts on your blog, you can use the an attribute selector that targets every div whose class attribute starts with “post-”:

div[class*="post"] {
  background-color: #333;
  }

This will match all the div elements whose class attribute contains the words “posts”, in any position.

...

我的问题是扩展上面的例子:

** ...更改您博客上的所有 div 元素的背景颜色除了匿名用户的帖子看起来像... **

[它看起来像什么？]

谢谢

Answer 1

首先，这不是在 CSS 中选择具有特定类的元素的正确方法。这就是.用于:

div.post {
  background-color: #333;
}

我只是简要浏览了那篇文章，但我不明白为什么它会推荐其他语法。除了需要更多输入之外，它在 Internet Explorer 6 中也不起作用，而且会使任何有经验的 CSS 作者完全困惑。

至于您的实际问题，您如何设置匿名用户帖子的样式完全取决于它们的标记方式。例如，如果这样的帖子在您的 HTML 中看起来像这样:

<div class="post anonymous">...</div>

然后你可以像这样简单地添加另一个样式规则:

div.anonymous {
  background-color: purple;
}

重要的问题是:这些样式规则以什么顺序出现在您的样式表中？如果.anonymous出现在最后，那么它将在适用的任何地方优先。所以，即使 .post和 .anonymous规则适用于 <div> , .anonymous颜色优先，因为它来得晚。 (当然，如果您将这些规则按其他顺序排列，则情况正好相反。)