继承
CSS中继承指的是,特定的CSS属性从文档树的父元素向下传递到子孙元素。
并非所有的CSS属性都可以继承,比如border
相关属性就不可以继承。
mdn中可以详细查看属性是否可以继承。
常见的可以继承的属性包括:
- 字体系列属性
font、font-familyfont-weight、font-size、font-style
- 文本系列属性
color、text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform:direction
- 元素可见性:visibility
- 表格布局属性:caption-sid
优先级
对于同一个元素,声明了多条CSS规则,那么浏览器根据哪条CSS规则来渲染元素哪?这就是优先级的作用,优先级就是分配给指定的 CSS 声明的一个权重,权重高的声明会作为最终渲染元素的规则。
继承的优先级是最低的
权重的五个等级(从高到低)及其权重:
!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; //生效