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、子元素和后代元素选择器
- 后代元素选择器:
- 选中指定元素的指定后代元素
- 语法:祖先元素 后代元素{}
- 子元素选择器: