从零开始前端学习[14]:选择器的优先级

选择器的优先级

选择器的优先级的使用注意事项，往往在我们写代码的时候是格外需要注意的。

单独来看标签的优先级
ID个数不同的时候的优先级
ID个数一致的时候，看类选择器个数
ID选择器和类选择器都一致的时候，看元素选择器

提示:
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

单独来看标签的优先级

怎么单独来看呢？？最简单的选择器有ID选择器，class选择器，与标签选择器，那么究竟是谁的优先级更大呢？之前说过同比下，ID选择器的优先级可能更大一点

ID选择器>class类选择器>元素选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--><meta name="Generator" content="EditPlus®">   <!--编辑器的名称--><meta name="Author" content="作者是谁">       <meta name="Keywords" content="关键词"><meta name="Description" content="描述和简介"><style type="text/css">                                        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}ul,ol{margin: 0; list-style: none; padding: 0;}a{ text-decoration: none; }*{ margin: 0; padding: 0; }.main{width: 1200px;border: 1px solid grey;margin: 50px auto}#id_li{width: 300px;height: 20px;background: green;color: white}.class_li{width: 300px;height: 20px;background: blue;color: red }.li{width: 300px;height: 20px;background: deeppink;color: black }</style>
</head>
<body><div class="main"><div><ul><li class="class_li" id="id_li">春田花花同学会</li></ul></div></div></body>
</html>

显示效果如下所示：

可以看到上述其实是按照ID选择器来进行选取的，而不是根据类选择器或者标签选择器来选取的

ID个数不同的时候的优先级

当ID个数不同的时候，这里的ID个数是指的的元素选择器中的ID个数不同;我们只看ID的个数，ID个数越多的他的优先级越高(id大于一切), 也就是说，我们在比较两个选择器的优先级的时候，我们首先看ID个数，如果ID个数不一样，那么，ID个数多的优先级就越高，class类选择器以及我们的元素选择器就不用看了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--><meta name="Generator" content="EditPlus®">   <!--编辑器的名称--><meta name="Author" content="作者是谁">       <meta name="Keywords" content="关键词"><meta name="Description" content="描述和简介"><style type="text/css">                                        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}ul,ol{margin: 0; list-style: none; padding: 0;}a{ text-decoration: none; }*{ margin: 0; padding: 0; }.main{width: 1200px;border: 1px solid red;margin: 50px auto}.main .box1 #box2 #inner_p{width: 300px;height: 20px;line-height: 20px;background: deeppink}.main #box1 #box2 #inner_p{width: 300px;height: 30px;line-height: 30px;background: red;color: white}</style>
</head>
<body><div class="main"><div class="box1" id="box1"><div class="box2" id="box2"><p id="inner_p">最内侧的p标签</p></div></div></div>
</body>
</html>

显示效果如下所示：

从上面就可以看到了，在选择的过程中，第二个选择器的id数目比第一个要多，因此根本不用再继续看类选择器或者标签选择器

ID个数一致的时候，看类选择器个数

ID选择器个数一样的时候呢？我们就数一下class类选择器的个数，类选择器个数越多的优先级就越高，总结：当我们比较两个选择器的优先级的时候，先数ID，如果说ID个数一样，那我们数class类选择器的个数，类选择器个数越多的优先级越高！

依旧采用上述的案例，修改样式如下，使第一个选择器的class选择器多余第二个。

.main #box1 #box2 .inner_p{width: 300px;height: 20px;line-height: 20px;background: deeppink}.main #box1 #box2 p{width: 300px;height: 30px;line-height: 30px;background: red;color: white}

显示如下所示：

可以看到时按照第一个选择器来进行显示的

ID选择器和类选择器都一致的时候，看元素选择器

当ID个数和class个数都一样的时候：ID 和class都一样的时候，看元素选择器总结：判断两个选择器优先级的时候，如果ID和class都一样的时候，我们就看元素选择器的个数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--><meta name="Generator" content="EditPlus®">   <!--编辑器的名称--><meta name="Author" content="作者是谁">       <meta name="Keywords" content="关键词"><meta name="Description" content="描述和简介"><style type="text/css">                                        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}ul,ol{margin: 0; list-style: none; padding: 0;}a{ text-decoration: none; }*{ margin: 0; padding: 0; }.main{width: 1200px;border: 1px solid red;margin: 50px auto}.main #box1  div p{width: 400px;height: 50px;line-height: 50px;background: gold;font-size: 20px}.main #box1  p{width: 300px;height: 30px;line-height: 30px;background: red;color: white}</style>
</head>
<body><div class="main"><div class="box1" id="box1"><div class="box2" id="box2"><p id="inner_p" class="inner_p">最内侧的p标签</p></div></div></div>
</body>
</html>

显示的效果如下所示:

通过子代选择器去选取，可以看出，当class选择器和id选择器数量都一致的时候，会根据标签选择器的数量来进行选取。

很简单的一些总结，基础好才是王道

欢迎持续访问博客