CSS 优先级

CSS 优先级

当多个冲突的CSS规则指示同一元素时,浏览器将遵循一些规则来确定特定元素。CSS 优先级是帮助浏览器确定哪个属性值与元素最相关的方法。它确定将哪种样式声明应用于元素。

仅当各种选择器影响同一元素时,CSS优先级才重要。在这种情况下,浏览器需要一种方法来标识要应用于匹配元素的样式,而CSS的优先级就是做到这一点的方法。
当两个或多个选择器具有相同的优先级值时,则使用最新的选择器。
通用选择器(*)和继承的值具有较低的优先级,即0优先级。
与选择器相比, style 属性的优先级值更大(样式表选择器中的!important 除外)。
!important更改选择器的优先级。当两个选择器具有相同的优先级时,则选择器具有!important

优先级层次结构

每个选择器在层次结构中都有一个位置。定义选择器的特定级别的主要有四个类别:
内联样式:它直接附加到要设置样式的元素上。例如:<p style="color: red;">。它具有最高优先级。
ID:它是具有第二高优先级的页面元素的唯一标识符。例如:#para。
类,属性和伪类:它包括类,属性和伪类(例如:focus,:hover等)。
元素和伪元素::它包括元素(div,h1)和伪元素(如:after和:before)的名称。它们的优先级最低。

CSS 优先级_https://bianchenghao6.com_【CSS 教程】_第1张

优先级规则

Specificity是权重,它应用于CSS声明。它由匹配选择器中每种选择器类型的数量确定。让我们看一下优先级的计算。
下面将讨论优先级规则以及一个示例。

ID的优先级选择器高于属性选择器

让我们尝试通过一个示例来理解它。

示例

在此示例中,我们将将id选择器与background-color属性一起使用。
 <!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
font-size: 30px;
color: blue;
background-color: red;
}
#div1 {
background-color: red;
}
div#div1 /*更高的优先级*/
{
background-color: yellow;
}
div[id=div1] {
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"> Welcome to the bianchenghao6.com </div>
</body>
</html>

在相同的情况下应用最新规则

在外部样式表中,如果两次应用同一规则,则将应用最新(或最后一个)规则。

示例

在此示例中,元素名称的优先级相同。在这种情况下,将考虑最新指定的元素名称。
 <!DOCTYPE html>
<html>
<head>
<style>
body{
font-size: 30px;
text-align: center;
}
div
{
background-color: yellow;
color: red;
}
div
{
background-color: red;
color: yellow;
}
</style>
</head>
<body>
<h2> 相同优先级的例子 </h2>
<div> Welcome to the bianchenghao6.com </div>
</body>
</html>

类选择器的优先级大于元素选择器

类选择器(.nav,.high等)比元素选择器(例如div, h1,p等)

示例

 <!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: blue;
text-align: center;
color: yellow;
font-size :40px;
}
div {
background-color: red;
text-align: right;
color: blue;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="intro">Welcome to the bianchenghao6.com</div>
</body>
</html>