选择器种类
- 标签选择器
- 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
做完了有疑问可以留言哦~
时间： 2024-09-30 05:30:17