前端学习Day8

css常用选择器

图片发自App

• 元素选择器
  将页面内的某个或者多个元素作为选择器，赋予样式

语法： 元素名{}

我在这里等你
我的圆圆很不错

此时元素p和h1均显示样式

• 类选择器
  也称为class属性选中一组属性
  可以同时为一个元素设置多个class属性，多个class属性之间用空格隔开
  语法：.class属性{}

骑着猪猪旅行去！
骑着猪猪旅行去！

• id选择器
  通过元素的id属性值选择唯一的一个元素
  语法：#id属性值{
  }

#hh {
color: red;
}

骑着猪猪旅行去！
骑着毛驴去北京！

此时后一个id为hh的段落显示样式

• 选择器分组（并集选择器）
  满足所列全部选择器的元素集合
  语法：选择器1,选择器2,选择器N

p,.ge{
font-size: 20px;
}

骑着猪猪旅行去！
骑着猪猪旅行去！

此时元素p和h2（因为h2的class属性值为ge）均显示样式

• 复合选择器（交集选择器)
  可以选择同时满足多个选择器的元素
  语法：选择器1选择器2选择器N
  注意：元素选择器一定要放在类选择器和id选择器之前否则无效

h1#if{
font-size:20px;
}

骑着猪猪旅行去！
骑着猪猪旅行去！

此时只有既是元素h1又带有id属性值为if的后标题显示样式

• 通配选择器
  选择页面所有元素的选择器
  语法：*{
  }

*{
color:green;
}

骑着猪猪旅行去！
骑着猪猪旅行去！

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