您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

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

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

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中优先级的一般规则:

  1. 内联样式(Inline Styles)优先级最高:
    内联样式是直接写在HTML元素的style属性中的样式规则。它们具有最高的优先级,将覆盖其他任何选择器定义的样式。
<p style="color: blue;">This is a paragraph with inline style.</p>
  1. ID选择器(ID Selectors)优先级第二:
    ID选择器使用HTML元素的id属性来选择元素,并具有较高的优先级。
<style>
#myElement {
  color: red;
}
</style>

<p id="myElement">This is a paragraph with ID selector.</p>
  1. 类选择器(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" />
  1. 元素选择器(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>
  1. 通用选择器(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
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门