2018-05-25 CSS选择器和优先级计算

第五篇博客-CSS选择器及优先级.png

一、CSS的三大特性？

1.1 继承：子类能够继承父类的某些样式
1.2 优先级：不同选择器定义的样式具有不同的优先级数量
1.3 层叠：当优先级数量相同时，后面定义的样式的覆盖前面定义的样式

二、CSS有哪些选择器？

2.1 元素选择器：div、p、img、a等
2.2 id选择器：#id1、#id2
2.3 class选择器：.class1、.class2
2.4 全局选择器：*
2.5 群组选择器：拥有相同样式的元素分组显示，用逗号隔开 div,p,a{color:#000;}
2.6 属性选择器：

a[attribute=value]:属性值为value的属性
a[attribute~=value]:属性值必须是一系列用空格隔开的多个值，而且这些值中的一个必须是指定的value
a[attribute|=value]:属性值以value或者value开始并立即跟上一个“-”字符，也就是"value-",比如lang=zh-cn
a[attribute*=value]:属性值包含value的属性
a[attribute^=value]:属性值以value开头的属性
a[attribute$=value]:属性值以value结尾的属性

2.7 后代选择器：子元素和父元素之前用空格分开 div p
2.8 子元素选择器：子元素和父元素用大于号隔开 div > p

后代选择器选择所有符合添加的子元素，包括子元素的子元素；然而子元素选择器只选择符合条件的直接后代。

2.9 相邻同胞选择器：兄弟元素之间用加号隔开h1+p
2.10 伪类选择器：a:link、a:visited、a:active、a:hover、input:focus
2.11 伪元素选择器：
div:after：在div元素之后插入内容
div:before：在div元素之前插入内容
p:first-letter：为p元素的文本首字母添加样式
p:first-line：为p元素的文本首行添加样式

三、选择器权重

提问：为什么不同的选择器为什么会有权重？
回答：在开发当中，我们经常会遇到设置的样式出来的情况，其实我们之前可能已经为某个元素设定了一个样式，但是该样式的优先级比较高，那么规定好权重，在开发时，就可以根据权重来计算优先级大小，从而避免各种样式覆盖的情况。

3.1 优先级分类
第一优先级：无条件优先的属性只需要在属性后面使用!important。(它会覆盖页面内任何位置定义的元素样式)
第二优先级：在html中给元素标签加style，即内联样式。(该方法会造成css难以管理，所以不推荐使用)
第三优先级：由一个或多个id选择器来定义。
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。
第五优先级：由一个或多个类型选择器定义。
第六优先级：通配选择器。

1.!important > 内联样式>id选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2.然而大多数情况下，我们常见的选择器都是组合在一起的，于是了解具体选择器代表的权值可以方便我们在开发时进行简单的计算。

3.2 选择器权重的等级
第一等级：代表内联样式，如style=""，权值为1000
第二等级：代表id选择器，如#id1，权值为100
第三等级：代表class、伪类和属性选择器，权值为10
第四等级：代表标签选择器和伪元素选择器，权值为1

通用选择器、子元素选择器和相邻同胞选择器并不在这个等级中，所以权重为0

四、选择器优先级的简单计算

<nav>
    <ul id="nav">
        <li class="checked"><a href="#">您好</a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>

那么计算下面的元素的优先级

nav ul#nav li.checked a:hover{color:red;}

权重计算.png