3

假设我有以下 HTML：

<span id="id1" class="class1 class2">This is a test</span>

如果#id1,.class1并且.class2都有不同的互斥 CSS 规则集，那么哪一个获胜？我一直在测试一个示例，在一种情况下，它正在选择（我认为）CSS 文件底部列出的那个，但在另一种情况下，它似乎是不确定的。

在这种情况下是否有特定规则？

4

4 回答 4

5

CSS中级联的基本原则是你有一个元素，以及适用于同一个元素的一个或多个 CSS 规则（因为元素匹配它们的选择器）。在此过程中，计算所有适用的样式，解决（或级联）任何冲突，然后应用。

如果规则和它们的声明是互斥的，那么它们中的任何一个本身都不会“胜过”其他任何一个，因为没有要解决的冲突，因此也没有什么可以覆盖的。例如，如果您有以下规则：

#id1 {
    color: red;
}

.class1 {
    border-width: 1px;
}

.class2 {
    border-style: dashed;
}

然后您的元素将具有红色文本和 1 像素厚的红色虚线边框。没有冲突，所以它们都将有效结合。（请注意，由于特殊行为，边框是红色的。）

jsFiddle 预览

只有当您在多个规则中声明了相同的属性时，选择器特异性和级联才会相关，因为您需要覆盖该相同属性的值。在这种情况下，如前所述，ID 优先于类，并且从上到下应用同样特定的规则；阅读选择器特异性。

例如，如果您有以下规则：

#id1 {
    color: red;
}

.class1 {
    text-decoration: underline;
    color: green;
}

.class2 {
    text-decoration: none;
    color: blue;
}

然后你的元素将有没有装饰的红色文本，因为

  • 中的color值#id1覆盖两个类中的值，并且

  • 中的text-decoration值.class2覆盖 中的值.class1。

jsFiddle 预览

请记住，所有这些都必须适用于同一个元素。如果你有一个只有一个 ID 的父级，一个只有一个类的子级，那么这些都不适用，因为你正在处理完全独立的元素。取而代之的是继承，我在上面链接到的文档中也介绍了这一点。

于 2013-04-13T02:57:52.600 回答
0

CSS 从上往下读，所以 class2 会赢！

更多信息 http://css-tricks.com/specifics-on-css-specificity/

于 2013-04-13T02:51:32.003 回答
0

ID 将优先于类。

如果一个元素具有多次使用 ID 定义的相同样式，则后者将优先于前者，除非您正在使用!important

CSS的优先顺序如下：

1 . ！重要的

2 . 在 HTML 元素中定义的内联样式

3 . 在头部定义的内部样式

4 . 外部样式表，它是一个工作表的链接 ( <link rel="stylesheet" type="text/css" href="style.css" />)

5 . 浏览器默认

于 2013-04-13T02:55:00.700 回答
0

这很容易——更接近更精致的赢（就像生活一样）

IE

然后得到了一张白纸：

从课堂开始 - 应用那些（又名 class1、class2）

但你知道那个人（id）

然后应用那个..

所以（如果有一个“赢家”） id 赢了

除非标签有style它的属性——那会赢

于 2013-04-13T04:32:32.863 回答