如何分层特异性

发布于 2024-08-03 09:08:58 字数 602 浏览 5 评论 0原文

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

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

例如,如果您想更改 所有div的背景颜色 您博客上的帖子元素, 您可以使用属性选择器 其目标是每个类的 div 属性以“post-”开头:

div[class*="post"] {
  背景颜色:#333;
  }

这将匹配其 class 属性在任何位置包含单词“posts”的所有 div 元素。

...

我的问题是用以下内容扩展上面的示例:

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

[看起来像什么?]

谢谢

Within the posting at http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

in the context of defining the rules of 'specificity' is stated:

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.

...

My question goes to extending the above example with:

** ...change the background color of all the div elements that are posts on your blog except posts by anon users looks like...
**

[whatzitlooklike?]

thx

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

っ左 2024-08-10 09:08:58

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

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

我只是简单地浏览了那篇文章,但我不知道为什么它会推荐其他语法。除了需要更多的输入之外,它在 Internet Explorer 6 中不起作用,并且会让任何有经验的 CSS 作者感到完全困惑。

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

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

那么您可以简单地添加另一个样式规则,如下所示:

div.anonymous {
  background-color: purple;
}

重要的问题是:这些样式规则以什么顺序出现在样式表中?如果 .anonymous 最后出现,那么无论它适用于何处,它都会优先。因此,即使 .post.anonymous 规则均适用于该

.anonymous > 颜色优先,因为它出现得较晚。 (当然,如果您将这些规则按其他顺序排列,则相反。)

First, that's not the correct way to select elements with a particular class in CSS. That's what the . is for:

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

I've glanced through that article only briefly, but I have no idea why it would recommend the other syntax. Besides the fact that it requires more typing, it won't work in Internet Explorer 6, and it will confuse entirely any experienced CSS author.

As to your actual question, how you'd style posts by anonymous users depends entirely on how they're marked up. For example, if such a post looks like this in your HTML:

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

Then you could simply add another style rule like so:

div.anonymous {
  background-color: purple;
}

The important question is: in what order do those style rules appear within your stylesheet? If .anonymous appears last, then it will take precedence wherever it applies. So, even though both the .post and .anonymous rules apply to that <div>, the .anonymous color takes precedence because it comes later. (Of course, the reverse will be true if you put those rules in the other order.)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文