【17】CSS基础（2）——选择器③选择器权重
【17】CSS基础（2）——选择器③选择器权重
★最后有选择器部分的思维导图总结
一、为什么比较选择器权重？
因为：权重高的会层叠权重低的。（关于层叠性，后面会继续分享）
二、权重比较
（一）基础选择器的权重；
1.比较方法：根据选择范围，范围越大权重越小：
*<标签选择器<类选择器<id选择器。
示例
<DOCTYPE html>
<html>
<head>
<title>基础选择器权重比较示例</title>
<style> .run {
color: blue; } span {
/*虽然是后写的，当时标签选择器权重比类选择器权重小*/ color: red; /*所以最后颜色也是显示blue*/ } </style>
</head>
<body>
<p >今天做了瑜伽</p>
<span class="run">跑了步</span>
</body>
</html>
（二）高级选择器的权重；
1.比较步骤：
①依次比较组成高级选择器的id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
★比较顺序∶（id 个数，类的个数，标签的个数）
②如果选择器权重都相同，需要比较CSS中代码的书写顺序，后写的层叠先写的。
示例1
<DOCTYPE html>
<html>
<head>
<title>高级选择器权重比较示例</title>
<style> .exercise p.run {
/*两个类，一个标签*/ color: blue; } .exercise .run {
/*两个类*/ color: red; } </style>
</head>
<body>
<div>
<div>
<p >今天真开心</p>
<p>学习使我快乐</p>
<p>继续加油</p>
</div>
<div class="exercise">
<p>今天做了瑜伽</p>
<p class="run">跑了步</p>
</div>
<div>
<p>今天吃了大盘鸡</p>
<p>喝了胡萝卜汁</p>
</div>
</div>
</body>
</html>
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
示例2
<DOCTYPE html>
<html>
<head>
<title>高级选择器权重比较示例</title>
<style> .exercise p.run {
/*两个类 一个标签*/ color: blue; } div .exercise .run {
/*两个类，一个标签*/ color: red; /*都一样权重，后写的层叠先写的*/ } </style>
</head>
<body>
<div>
<div>
<p >今天真开心</p>
<p>学习使我快乐</p>
<p>继续加油</p>
</div>
<div class="exercise">
<p>今天做了瑜伽</p>
<p class="run">跑了步</p>
</div>
<div>
<p>今天吃了大盘鸡</p>
<p>喝了胡萝卜汁</p>
</div>
</div>
</body>
</html>
选择器部分总结
★下篇继续：CSS基础（3）——层叠性和继承性…
