您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS 的折叠性、继承性、优先级

时间：08-25来源：作者：点击数：20

CSS 的折叠性、继承性、优先级（权重）

1、折叠性（Collapsing）

折叠性是指当多个CSS属性应用到同一个元素上时，它们如何相互作用以确定最终的样式。当不同的规则决定同一个属性的值时，折叠性规定了哪个规则的值会被应用。

折叠性的规则如下：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: red;
    }

    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

在这个示例中，两个p选择器都定义了不同的颜色属性，一个是红色，一个是蓝色。根据折叠性规则，后面的规则会覆盖前面的规则。因此，最终应用到段落的颜色将是蓝色。

2、继承性（Inheritance）

继承性是指某些CSS属性的值能够被其子元素继承。当一个元素的某个属性没有显式地定义时，它将从父元素继承该属性的值。

例如，如果父元素的颜色属性设置为红色，子元素的颜色属性通常也会继承为红色，除非在子元素上显式地设置了不同的值。
并非所有的CSS属性都具有继承性，只有特定的属性才会被继承。
子元素可以继承父元素的样式（text-,front-,line-这些元素开头的可以继承，以及color属性）
行高的继承性

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p>This is a paragraph with inherited font size.</p>
  </div>
</body>
</html>

在上面的示例中，父元素的字体大小设置为20像素，子元素的字体大小将继承为20像素。

3、优先级（Specificity）

CSS中的优先级是用于确定哪个规则将应用到特定元素的机制。它基于不同选择器和声明之间的特定性和重要性。

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

下面是CSS中优先级的一般规则：

内联样式（Inline Styles）优先级最高：
内联样式是直接写在HTML元素的style属性中的样式规则。它们具有最高的优先级，将覆盖其他任何选择器定义的样式。

<p style="color: blue;">This is a paragraph with inline style.</p>

ID选择器（ID Selectors）优先级第二：
ID选择器使用HTML元素的id属性来选择元素，并具有较高的优先级。

<style>
#myElement {
  color: red;
}
</style>

<p id="myElement">This is a paragraph with ID selector.</p>

类选择器（Class Selectors）和属性选择器（Attribute Selectors）优先级第三：
类选择器和属性选择器是通过类名和属性选择来选择元素的，它们的优先级相对较低。

<style>
.myClass {
  color: green;
}

[type="text"] {
  font-weight: bold;
}
</style>

<p class="myClass">This is a paragraph with class selector.</p>
<input type="text" value="Example" />

元素选择器（Element Selectors）和伪类选择器（Pseudo-Class Selectors）优先级第四：
元素选择器是基于HTML元素名称来选择元素的，而伪类选择器是用于选择元素的特定状态或位置。

<style>
p {
  font-size: 18px;
}

a:hover {
  color: orange;
}
</style>

<p>This is a paragraph with element selector.</p>
<a href="#" class="myLink">Link</a>

通用选择器（Universal Selector）和伪元素选择器（Pseudo-Element Selectors）优先级最低：
通用选择器选择所有元素，而伪元素选择器用于选择元素的特定部分。

<style>
* {
  margin: 0;
  padding: 0;
}

p::first-line {
  text-transform: uppercase;
}
</style>

<p>This is a paragraph with universal selector.</p>

注意：

权重是有4组数字组成，但是不会有进位
等级判断从左向右，如果某一为数值相同，则判断下一位数值
继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加，如果是复合选择器，则会有权重叠加，需要计算权重（相加）。但是不会有进位
- div ul li ----> 0,0,0,3
- .nav ul li ----> 0.0.1.2