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

时间：2022-01-05 15:42: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>

显示效果如下所示：

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

可以看到上述其实是按照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>

显示效果如下所示：
从零开始前端学习[14]:选择器的优先级
从上面就可以看到了，在选择的过程中，第二个选择器的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}

显示如下所示：

从零开始前端学习[14]:选择器的优先级
可以看到时按照第一个选择器来进行显示的

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>

显示的效果如下所示:

从零开始前端学习[14]:选择器的优先级
通过子代选择器去选取，可以看出，当class选择器和id选择器数量都一致的时候，会根据标签选择器的数量来进行选取。

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

欢迎持续访问博客
标签：

相关文章