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>

此时页面上所有元素均显示样式