2018-12-19选择器

元素选择器

作用：通过元素选择器可以选择页面中的所有指定元素。
语法：标签名{}

p{
  color: red;
}

id选择器

作用：通过元素的id属性值选中唯一的一个元素。
语法：#id属性值{}

#p1{
 font-size: 20px;
}

类选择器

作用：通过元素的class属性值选中一组元素。
语法：.class属性{}

.p2{
 color: red;
}

复合选择器（交集选择器）

作用：可以选中同时满足多个选择器的元素。
语法:选择器1选择器2选择器N{}
不建议id选择器使用复合选择器

span.p3{
  color: yellow;
}

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

作用:通过选择器分组可以同时选中多个选择器对应的元素。
语法：选择器1，选择器2，选择器N{}使用逗号隔开各个选择器

#p1,.p2,h1{
 color: yellow;
}

通配选择器

作用：可以用来选中页面中的所有元素。
语法：*{}

*{
color: red;
}

后代元素选择器

作用：选中指定元素的指定后代元素。
语法：祖先元素 后代元素{}
使用空格隔开

#d1 p span{
 color: green;
}
<!--选中id为d1的div中的p元素中的span元素-->

子元素选择器

作用：选中指定父元素的指定子元素。
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器

div > span{
  color: red;
}

元素之间的关系

• 父元素：直接包含子元素的元素
• 子元素：直接被父元素包含的元素
• 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
• 后代元素：直接或间接被主线元素包含的元素，子元素也是后代元素
• 兄弟元素：拥有相同父元素的元素叫兄弟元素