CSS —— 选择器

来源:转载

选择器种类

标签选择器

id选择器

类选择器

通配符

交集选择器

并集选择器

后代选择器

子代选择器

选择器设置样式优先级

[code]默认样式 < 继承样式 < 通配符设置样式 < 标签选择器设置样式 < 类选择器设置样式 < id选择器设置样式 < 行内样式 < !important

选择器权重计算

[code]1. 判断是否继承,若不是继承则进行下一步2. (0.0.0.0) 第一个数表示当前选择器中important的个数 第二个数表示当前选择器中id选择器的个数 第三个数表示当前选择器中类选择器的个数 第四个数表示当前选择器中标签选择器的个数 3. 比较:从第一个数开始比较,如果第一个数大,那么这个选择器的权重就大,相应的优先级就高,如果一样,再比较下一个,依此类推

习题练习(答案在最后,先做再看哦~)

1<style type="text/css"> #father #soncolor:blue; } #father p.c2color:black; } div.c1 p.c2color: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

做完了有疑问可以留言哦~

分享给朋友:
------分隔线----------------------------
您可能感兴趣的文章:
随机阅读: