Skip to content

一、什么是CSS继承

CSS中继承指的是,特定的CSS属性从文档树的父元素向下传递到子孙元素。


二、哪些CSS属性可以继承

并非所有的CSS属性都可以继承,比如border相关属性就不可以继承。

mdn中可以详细查看属性是否可以继承。

<font style="color:rgb(0, 0, 0);">font</font><font style="color:rgb(0, 0, 0);">font-size</font>

<font style="color:rgb(0, 0, 0);">color</font><font style="color:rgb(0, 0, 0);">line-height</font>


****

权重的五个等级(从高到低)及其权重:

  • !important;
  • 行内样式;
  • ID选择器, 权重:100;
  • class属性选择器伪类选择器权重:10;

属性选择器:根据元素的属性及属性值来选择元素,比如button的type属性等。

伪类选择器: :active :focus等选项. 复制代码

  • 标签选择器伪元素选择器权重:1;

标签选择器:h1

伪元素选择器: :before :after

权重规则:

1.不推荐使用!important

不推荐使用!important,因为!important根本没有结构与上下文可言,并且很多时候权重的问题,就是因为不知道在哪里定义了一个!important而导致的。

2.

比如下边这段代码:

css
#parent {
  color: green;
}

h1 {
  color: purple; //生效
}

<html>
  <body id="parent">
    <h1>Here is a title!</h1>
  </body>
</html>

上述代码会渲染成:

3.行内样式总会覆盖外部样式表的任何样式,会被!important覆盖

4.单独使用一个选择器的时候,不能跨等级使css规则生效

无论多少个class组成的选择器,都没有一个ID选择器权重高。类似的,无论多少个元素组成的选择器,都没有一个class选择器权重高、无论多少个ID组成的选择器,都没有行内样式权重高。

5.如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效

选择器可能会包含一个或者多个与权重相关的计算点,若经过权重值计算得到的权重值越大,则认为这个选择器的权重高。举一个简单的栗子:

css
 .test #test{ } // id 100+class 10=110;    
.test #test span{} // id 100+class 10+span 1=111;     
.test #test .sonClass{} // id 100+class 10+class 10=120; //生效

6.如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.