前端基础：关于css选择器的总结（二）

1，css优先级规则

（1)就近原则，后面的样式覆盖前面的样式

（2）指定的高于继承的

2，层叠优先级

浏览器默认样式 < 外部样式表 < 内部样式表 < style内联样式

3，选择器优先级

important > 内联 > ID > 类|伪类| 属性选择器> 标签 |伪元素 > 通配符

选择器	权重（虚拟值）
通用选择器*	0,0,0,0,0
元素(标签)选择器，伪元素	0,0,0,0,1
类选择器	0,0,0,1,0
属性选择器	0,0,0,1,0
伪类	0,0,0,1,0
ID 选择器	0,0,1,0,0
内联样式	0,1,0,0,0
！important	无穷大

 4，如何计算css选择器权重

通配选择符（*）关系选择符（+, >, ~, ' ', ||）和 否定伪类（:not()）对优先级没有影响。（但是，在 :not() 内部声明的选择器会影响优先级）。

下面css的权重计算示例

 html代码：

<div lang="hc">
   <div class="divbox">颜色是？</div>
</div>

css代码：

div.divbox:not([dir]) { color: red; }
div[lang] > .divbox { color: blue; }

 我们先来计算一下各自的优先级数值。

首先是div.divbox:not([dir])，出现了 1 个标签选择器 div，1 个类名选择器.divbox和 1 个否定伪类:not，以及属性选择器[dir]，计算结果是 1+10+0+10，也就是 21。

接下来是div[lang] > div.divbox，出现了 1 个标签选择器div，1 个属性选择器[lang]和 1 个类名选择器.divbox，计算结果是 1+10+10，也就是 21。

这两个选择器的计算值居然是一样的，后来渲染的就会覆盖前面的，也就是说，当 CSS 选择器的优先级数值一样的时候，后渲染的选择器的优先级更高
因此，上题的最终颜色是蓝色（blue）。

5.关于css属性的继承

常用的css不可继承的属性

display：规定元素应该生成的框的类型

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

盒子模型的属性：width、height、margin 、border、padding

背景属性：background

定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

常用的css可继承的属性：

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

color：文本颜色

visibility：元素可见性

光标属性：cursor

所有元素可以继承的

1、元素可见性：visibility

2、光标属性：cursor

内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

text-indent、text-align

最重要的一点：css属性一旦继承了不能被取消，只能重新定义样式。