选择器种类
- 标签选择器
- id选择器
- 类选择器
- 通配符
- 交集选择器
- 并集选择器
- 后代选择器
- 子代选择器
选择器设置样式优先级
默认样式 < 继承样式 < 通配符设置样式 < 标签选择器设置样式 < 类选择器设置样式 < id选择器设置样式 < 行内样式 < !important选择器权重计算
1. 判断是否继承，若不是继承则进行下一步
2. （0.0.0.0）
第一个数表示当前选择器中important的个数
第二个数表示当前选择器中id选择器的个数
第三个数表示当前选择器中类选择器的个数
第四个数表示当前选择器中标签选择器的个数
3. 比较：从第一个数开始比较，如果第一个数大，那么这个选择器的权重就大，相应的优先级就高，如果一样，再比较下一个，依此类推习题练习（答案在最后，先做再看哦~）
1 <style type="text/css"> #father #son color:blue; } #father p.c2 color:black; } div.c1 p.c2 color:red; } #father{ color:green !important; } div#father.c1 { color: yellow; } </style> <body> <div id="father" class="c1"> <p id="son" class="c2"> 这行字体是什么颜色的？ </p> </div> </body>
2 <style type="text/css"> #father{ color:red; } p{ color:blue; } </style> <body> <div id="father"> <p>这行字体是什么颜色的？</p> </div> </body>
3 <style type="text/css"> div p{ color:yellow; } #father{ color:red; } p.c2{ color:blue; } </style> <body> <div id="father" class="c1"> <p class="c2"> 试问这行字体是什么颜色的？ </p> </div> </body>
4 <style type="text/css"> div div{ color:blue; } div{ color:red; } </style> <body> <div> abc <div> def <div> 试问这行字体是什么颜色的？ </div> </div> </div> </body>
5 <style type="text/css"> div div div div div div div div div div div div{ color:red; } .me{ color:blue; } </style> <body> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div class="me">试问这行文字是什么颜色的</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body>
6 <style type="text/css"> .c1 .c2 div{ color: blue; } #box1 div{ color:yellow; } div #box3{ color:green; } </style> <body> <div id="box1" class="c1"> <div id="box2" class="c2"> <div id="box3" class="c3"> 文字 </div> </div> </div> </body>
这里是答案
- 做完了才能看哦~
- blue
- blue
- blue
- blue
- blue
- green
做完了有疑问可以留言哦~