1、常用选择器
- 元素选择器：通过元素选择器，可以选择页面中所有指定的元素
- id选择器：
- 通过元素的id属性选中唯一的一个元素
- 语法：#id属性值{}
- 类选择器：
- 通过元素的class属性值，选中一组元素
- 语法：.class属性值{}
- 拥有相同的class属性值的元素，表示他们是一组元素
- 可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
- 又可以单独，又可以重组
- 选择器分组(也叫做并集选择器)：
- 通过选择器分组可以同时选中多个选择器对应的元素
- 语法：选择器1，选择器2，选择器n{}
- 适配选择器：
- 可以用来选择页面中的所有元素
- 语法：*{}
- 要用之前记得把前面测试的注掉
- 复合选择器（交集选择器）：
- 作用：可以选中同时满足多个选择器的元素
- 语法：选择器1选择器选择器n{}
- 对于id选择器来说，不建议使用符合选择器
- 因为id名就已经唯一了
<style>
p{color:#F00;}
h1{color:#0C6;}
#p1{color:#96C;}
.p2{color:#FF0;}
.woshinibaba{font-size: 50px;}
#p1,.p2,.woshinibaba{color:#F93;}
*{color:#C30;}
span.p3{color:#00F;}
</style>
<body>
<h1>爸爸之歌</h1>
<p id="p1">我是你爸爸</p>
<!--
class属性：
class属性和id属性类似，但是class属性可以重复
-->
<p class="p2 woshinibaba">我是你爸爸</p>
<p class="p2">我是你爸爸</p>
<p class="p2">我是你爸爸</p>
<p>我是你爸爸</p>
<p>我是你爸爸</p>
<p>我是你爸爸</p>
<p>我是你爸爸</p>
<p>我是你爸爸</p>
<p class="p3">我是你爸爸</p>
<span class="p3">我是你爷爷</span>
</body>
2、子元素和后代元素选择器
- 后代元素选择器：
- 选中指定元素的指定后代元素
- 语法：祖先元素 后代元素{}
- 子元素选择器：
最低0.47元/天 解锁文章
1535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
