目录
选择器知识类型详细介绍
因为关于css选择器有介绍的很详细的官网，对应选择器不知道的咱可以直接在下面3个网站上查询，咱就不具体介绍了，下面介绍中元素等同于标签。
CSS选择器权重知识
之前有人听网上讲课说css选择器的权重是256进制，然后轻易的相信了，总结了一下得出：即如果是10对应的是十进制的256，如果是100对应的是256*256，并以此类推，然后我们计算时是将选中CSS样式中使用的选择器的权重相加（选择器{css属性}，即带下滑线部分涉及到的选择器权重相加）。当选中相同内容中相同的属性时，权重大的会覆盖权重小的，如果属性都是不同，则无影响，都会生效。然后注意infinity在计算机中是有值的，所以infinity+1>infinity。因为是256进制，我们计算时一般只用比较最高位即可，不行的话依次向下比较低位的。
文章写完后面自己实测了下，发现绝对不是256进制，至于是多少进制呢，咱没有测出来，认为可以理解为每一位都是无限大的。下面有测试方法。
注意又发现伪元素的权重应该是大于！importan的。
CSS选择器连接方法
以下以选择器A、B为例(AB；A B；A>B；A,B；A+B；A~B)
1.直接连接（又叫结合选择器）：代表选择的结果同时满足A和B两个条件的元素（注意连接过程不要产生歧义即可，比如类选择器和标签选择器的链接，咱把类选择器放后面）。
2.空格连接代表（又叫后代选择器或包含选择器）：代表选择A所有的后代标签B（即包括子孙、子子孙等）。
3.>号连接代表（又叫子元素选择器）：代表选择A的所有直接子元素B（即满足B的上一层为A）。
4.,号连接代表（又叫分组选择器）：代表选出A和B两个内容。
5.+号连接代表（相邻兄弟选择器）：代表选择B，B满足与A是相邻兄弟节点关系且A在B的前面，2个都有相同的父级。
6.~号连接（CSS3新增）：代表选择选择B，B满足是A的兄弟节点（相同父元素）且出现在A之后。
这些选择器是不参与权重计算的，可以理解为权重为0，但是标签出现的次数会计算参与权重计算，例如A+B相当于为2（会大于直接通过标签选中B）。
各选择器的权重（括号中代表权重）
伪元素选择器（>infinity）
！important（infinity）
直接加在{}中的单个属性中，例如下图，他的权重是infinity，表示是无穷大，但计算中也是一个数字，所以也可以计算比较大小（即infinity+1>infinity）。
div { background-color: #000!important; }行间样式选择器（1000）
例如下图：我们通常在html的标签中用style的方式插入的css属性。
<div style="width: 66px"></div>id选择器（100）
通过#abc来选择id=‘abc’的标签,其中每个标签只能有一个id且不相同，注意不能以数字开头，不然无法在css中用#号选中。
class（类）选择器（10）
通过或.className的方式选择包含class=‘className’的所有标签（相当于属性选择器中的[class~='className']，而不是[class='className']），其中每个标签可以有多个class名，可以与其他的class名相同，多个类名中间用空格分隔，例如class='className1 className2 className3',这里class中就有3个类名，注意不能以数字开头，不然无法在css中用.号选中。
属性选择器（10）
通过[class='className']的方式选择class=‘className’的所有标签（只会选择有唯一一个类名为'className'的标签，如需要选择多个类名的中间用空格隔开），其中可以只填写class，比如[id]是选择有id属性的所有标签。
伪类选择器（10）
通过A:hover来选择，代表前面选择的元素A在鼠标悬浮在上面时触发{}中的内容，包括其它例如A:empty、A:nth-child等，通过单点'：'选中。
其它伪类选择器具体介绍
标签选择器（1）
通过div来选择，代表选择所有的div标签
伪元素选择器 （1）（权重不为1，大于！impotant）
通过A::before或A:before来选择，代表选择所有A标签的::before元素，该元素默认display为inline，通过'::'选中，注意2点：
1.如果选中后{}中不设置content内容，那么该选择器也不会生效。
2.伪元素是不支持:hover属性的（A::before:hover是不会生效的，如果要选我们只能把选择范围扩大，把hover属性添加到A上例如：A:hover::before）。
其它伪元素选择器介绍
通配符选择器（0）
通过*号选中，代表选择所有的元素，通常用于初始化所有标签。
CSS权重进位制测试
首先我们要用到属性选择器、类选择器和id选择器，测试代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b[class='c']{
width: 100px;
height: 100px;
background-color:blue;
}
.b.b{
width: 100px;
height: 100px;
background-color:red;
}
.b{
width: 100px;
height: 100px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="a" class="b c d"></div>
</body>
</html>这个结果最后会显示一个红色的方块，那这说明相同类选择器的权重是可以叠加，而我们知道类选择器权重为10，id选择器权重为100，然后你就可以ctr+c复制ctr+v粘贴.b,放前面无数个，再把另外2个中的一个选择器改成#a，你会发现运行的还是#a选择的内容，而且当你.b粘贴过多了后选择器的颜色会变白代表该选择器已经失效了，所以没有进位存在，至少电脑上输入不了，顾可以理解为每一位都是无限大的，咱比较时，从最高位开始比较即可。
256进制问题的理解
首先说我们十进制，有个位，十位，百位，千位，都是满十进1的，同理我们可以给256进制，定义a位对应十进制个位，b位对应十进制十位，c位对应十进制百位，d位对应十进制的千位，首先dcba位对应都为0，然后我们不停的加1，当a位满256时进一位到b上，然后自己归零，即变成0010了，所以256进制的10对应的是256，同理当a，b上的位都为255时，再加1，这时ab都为零了，进到了c位，所以256进制的0100对应256*256，依次类推。在进制的问题上，不理解的大家不要把数字当做一个整体，要把每一位分开来看。
权重简单计算方法举例
例1，如下图，我们可以将权重位数看成a、b、c、d4个数，先比较最高位a的数都是0，再比较b的数都是1，在比较c的数，发现1>0,即第一条属性生效。
#a.b{background-color:#fff;}
div#a{background-color: #000;}<div class="b" id="a">123</div>例2，如下图，还是同样的，其实！important我们也可以把他当做1位数字，因为它无法叠加，所以只能为0或1，即我们把整个权重的计算当做5个位数，a，b，c，d，e，从a-e依次比较，当其中一次比较出结果后我们就返回结果，之后的就不比较了，首先，我们比较a位，都是！important顾都为1，比较b位数，都是0,比较第c位，第一条有3个id选择器，c=3，而第二条只有2个id选择器，c=2，3>2,顾得出结果第一条生效。
#a#a#a.b{background-color:#fff!important;}
#a#a.b{background-color: #000!important;}计算方法总结
把css权重看做a、b、c、d、e这5个数，其中
1.a对应！important，只能为0、1
2.b对应行间样式也只能为0、1
3.c对应id选择器为任意数
4.d对应类、属性、伪类选择器为任意数
5.e对应标签、伪元素选择器为任意数
这5位数不互相进位，比较时从a到e开始比较，只要比较出大小差异后，就返回结果，之后的不再比较。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
