css常用选择器
图片发自简书App
- 元素选择器
将页面内的某个或者多个元素作为选择器，赋予样式
语法： 元素名{}
<style >
p,h1{
color: blue;
font -size: 20px;
}
</style >
<hr/>
<h1>我在这里等你</h1>
<p>我的圆圆很不错</p>
此时元素p和h1均显示样式
- 类选择器
也称为class属性选中一组属性
可以同时为一个元素设置多个class属性，多个class属性之间用空格隔开
语法：.class属性{}
<style>
.ge{
color: yellow;
}
</style >
<hr/>
<p class="ge ">骑着猪猪旅行去！</p>
<h2 class="ge ">骑着猪猪旅行去！</h2>
- id选择器
通过元素的id属性值选择唯一的一个元素
语法：#id属性值{
}
#hh {
color: red;
}
<hr/>
<p >骑着猪猪旅行去！</p>
<p id="hh">骑着毛驴去北京！</p>
此时后一个id为hh的段落显示样式
- 选择器分组（并集选择器）
满足所列全部选择器的元素集合
语法：选择器1,选择器2,选择器N
p,.ge{
font-size: 20px;
}
<hr/>
<p>骑着猪猪旅行去！</p>
<h2 class="ge ">骑着猪猪旅行去！</h2>
此时元素p和h2（因为h2的class属性值为ge）均显示样式
- 复合选择器（交集选择器)
可以选择同时满足多个选择器的元素
语法：选择器1选择器2选择器N
注意：元素选择器一定要放在类选择器和id选择器之前否则无效
h1#if{
font-size:20px;
}
<hr/>
<h1>骑着猪猪旅行去！</h1>
<h1 id="if ">骑着猪猪旅行去！</h1>
此时只有既是元素h1又带有id属性值为if的后标题显示样式
- 通配选择器
选择页面所有元素的选择器
语法：*{
}
*{
color:green;
}
<hr/>
<h2 class="ge ">骑着猪猪旅行去！</h2><p>骑着猪猪旅行去！</p>
此时页面上所有元素均显示样式
