Question

我有这个：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <div id="best_friend" class="friend" ></div>
        <div class="family"></div>
        <div class="enemy" id="archnemesis"></div>

    </body>
</html>


div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border-radius:100%;
    border: 2px solid black;

}

#best_friend {
 border: 4px solid #00C957;   
}

.friend {
 border: 2px dashed #008000;   
}

.family {

 border: 2px dashed #0000FF;   

}

.enemy {
  border: 2px dashed #FF0000;   

}

#archnemesis {
 border: 4px solid #CC0000;   
}

我的问题是：请注意我如何为border和class定义id。应用的border是来自id的{{1}}。为什么这样？为什么border中的id规范会覆盖class中的{。}}。

Answer 1

不包含例外（例如:not，!important），以下选择器类型列表是通过提高特异性来实现的：

specificity

通用选择器（例如*）（最低）
类型选择器（例如，h1）
类选择器（例如.example）
属性选择器（例如，[type =＆＃34; radio＆＃34;]）
伪类（例如：悬停）
ID选择器（例如，＃example）
内联样式（例如，style =＆＃34; font-weight：bold＆＃34;）（最高）

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

应用的边框是来自id的边框。为什么这样？为什么id中的边界规范会覆盖类中的边界规范。

从此列表中，您可以看到id高于class，因此将应用id中设置的边框。

Answer 2

浏览器根据特异性确定要按什么顺序应用哪些样式，数字越大，确定将应用的样式。

通用选择子的特异性为0,0,0,0 * = 0

HTML选择器的特异性为1.
p，div等。= 1

因此每个HTML选择器都会增加特异性 div p = 2 ，div p span = 3

类选择器的特异性为10 .class = 10

类选择器与HTML选择器结合使用 div p.class = 12

ID选择器的特异性值为100. #id = 100

ID选择器与HTML选择器结合使用 #id div = 101

!important会覆盖所有其他样式，除非与其他选择器结合使用。 table td {height: 50px !important;}会覆盖仅应用于height中的td的任何table样式。

内联样式的特异性最高为1000 style= = 1000

有用资源

CSS Specificity: Things You Should Know
Specificity | HTML Dog

Answer 3

id比class更优先。

Answer 4

以下规则适用于css

1。）当多个重叠样式应用于同一个元素时，只有最后一个样式可见

2.。）当使用<div class="carousel-inner"> {{#each sliders}} <div class="{{this.class}}"> <img src="{{this.value.url}}"> </div> {{/each}} </div>属性时，它具有最高优先级

3。）应用具有最高CSS特异性的样式。不同元素的特异性定义如下：

ID属性= 100
类属性= 10
元素= 1

参考this link

Answer 5

由于id的优先级高于class，因此您可以在this官方文档中验证该内容。

Answer 6

特异性层次结构

每个选择器都在特异性层次结构中占有一席之地。有四个不同的类别定义了给定选择器的特异性级别：

内联样式（文档中存在样式）。内联样式存在于XHTML文档中。它直接附加到要设计样式的元素上。例如。 @IBOutlet
ID（ID选择器数量） ID是您的页面元素的标识符，例如<h1 style="color: #fff;">。
类，属性和伪类（类选择器的数量）。该组包括#div和伪类，如.classes, [attributes]等。
元素和伪元素（元素（类型）选择器的数量）。包括例如:hover, :focus和:before。

价：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

在这里：http://fourword.fourkitchens.com/article/css-specificity-id-overrides

如果为元素指定了id和class，那么应用哪个属性？为什么？

6 个答案:

有用资源