css选择器

时间 2019-11-06

标签 css 选择器栏目 CSS 繁體版

原文原文链接

style属性

用法：css

<标签名 style="规则:规制值;..." > ... </标签名>浏览器

例如：spa

<p style="font:12px 宋体;color:green;text-indent:2em;">段落文字1 </p>
<p style="font:12px 宋体;color:green;text-indent:2em;">段落文字2 </p>
<p style="font:12px 宋体;color:green;text-indent:2em;">段落文字3 </p>

style标签

在上面的例子中，三个p标签的style属性是冗余的，能够用一个style标签标示，例如：code

<head>
<style type="text/css">
p { font:12px 宋体;color:green;text-indent:2em; }
</style>
</head>
<body>
<p>段落文字1 </p>
<p>段落文字2 </p>
<p>段落文字3 </p>
</body>

这里用到了标签选择器的语法规则：标签名 { 样式规则 }blog

还支持类选择器：.类名 { 样式规则 }排序

以及ID选择器：#id { 样式规则 }继承

例如：input

<style type="text/css">
.class1 { font:bold 16px 宋体;background:blue; color:yellow;}
#div1 { background:green; text-decoration:underline; }
</style>

...

<div class="class1">内容1</div>
<div id="div1" class="class1">内容2</div>
<div class="class1">内容3</div>

优先级

当不一样选择器的样式设置有冲突时，会选择权重高的选择器设置样式。it

选择器的优先级顺序：io

ID选择器 > class选择器 > 标签选择器
行间样式 > 内联样式 > 外联样式

css继承是从一个元素向其后代元素传递属性值所采用的机制。肯定应当向一个元素应用哪些值时，浏览器不只要考虑继承，还要考虑声明的特殊性，另外须要考虑声明自己的来源。这个过程就称为层叠。——《css权威指南》

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，能够认为它的特殊性值为1,0,0,0,0。

例如：

a{color: yellow;} /*特殊性值：0,0,0,1*/
div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/

demo：

<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第四、5行规则，第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第二、3行规则，第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第六、7行规则，第7行优先级高-->
</div>

分析上面的demo，要注意特殊性是怎么排序的，上面第4行和第5行规则，第4行之因此优先级比第5行高，是由于第四行特殊性值最后面是1，而第5行特殊性值最后面是0。回过头来回答文章最开始的问题，为何ID选择器的优先级比类选择器的优先级高？其实是由于选择器特殊性值是从左向右排序的，特殊性值1,0,0,0大于以0开头的全部特殊性值，即使它是0,99,99,99，优先级依然比1,0,0,0要低。

前面有讲到通配选择器*的特殊性值是0,0,0,0，而元素经过父元素继承过来的样式是没有特殊性值的，因此，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。

细心的同窗应该已经发现了，特殊性值中的4个0中的第一个0是给谁暗箱操做内定了吗？是的！DOM中的行间样式送了点红包，因而它就牛了。行间样式的特殊性是1,0,0,0。行间样式的优先级比ID选择器优先级高。

层叠

假如特殊性相同的两条规则应用到同一个元素会怎样？css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性，根据前面的优先级计算规则决定哪条规则起做用，当特殊性值也同样的时候，css规则会按顺序排序，后声明的规则优先级高，成为人生赢家，当上总经理出任CEO迎娶白富美。

咱们知道a标签有四种状态：连接访问前、连接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active，而且这四个伪类若是对同一个元素设置同一个属性，那它们的声明顺序还有必定要求，通常你们都遵循“爱恨原则LVHA”（LoVe HAte），为何是这个顺序？不能是其它顺序吗？

根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则优先级高。当鼠标滑过a连接时，知足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；同理，当鼠标点击激活a连接时，同时知足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover以后。所以得出LVHA这个顺序。这个顺序能不能变？能够，但也只有:link和:visited能够交换位置，由于一个连接要么访问过要么没访问过，不可能同时知足，也就不存在覆盖的问题。