CSS复习--选择器（一）

目录

常用选择器

1.元素选择器

2.id选择器

 3.类选择器

4.通配选择器

 复合选择器

1.交集选择器

2.选择器分组（并集选择器） 

关系选择器 

1.子元素选择器

 2.后代元素选择器

3.兄弟元素选择器

---

---

常用选择器

1.元素选择器

元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}

p{
    color: red;
}

2.id选择器

id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{}  #red{}

#red{
    color: red;
}

 3.类选择器

类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值{}

.blue{
    color: blue;
}

4.通配选择器

通配选择器
作用：选中页面中的所有元素
语法：*

*{
    color: brown;
}

 复合选择器

1.交集选择器

交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red{
    font-size: 30px;
}

2.选择器分组（并集选择器） 

选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
可以任意组合： #b1,.p1,h1,span,div.red{}

h1,span{
    color: green;
}

关系选择器 

1.子元素选择器

子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素{}

div.box > span{
    color: red;
}

 2.后代元素选择器

后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代{}

div span{
    color: skyblue;
}

3.兄弟元素选择器

选择下一个兄弟
语法：前一个 + 下一个

选择下边所有的兄弟
语法：兄 ~ 弟

p + span{
    color: tomato;
}
p ~ span{
    color: orange;
}