1,标签选择器
2,class选择器
3,id选择器
4,通配符选择器
5,父代选择器
6,子类选择器
7,并集选择器
8,结果伪类选择器
1,标签选择器 根据标签来定位css样式
p {color:red}
div {background:blue}
a {color:blue}
p标签选择器
< a href="#">a标签选择器
2,class选择器 根据class来定位css样式
3,id选择器 根据id属性来定位css ,和class类选择器的区别是,id属性是唯一的,
4,通配符选择器
通配选择器用一个星号(*)表示。单独使用时,这个选择器可以与文档中的任何元素匹配,就像一个通配符。如,让页面上的所有文本都为黑色:
* { color: black; }
当然也可以选择某个元素下的所有元素。在与其他选择器结合使用时,通配选择器可以对特定元素的所有后代应用样式。如,以下代码为 .demo 元素的所有后代,添加一个灰色背景:
.demo * { background: gray; }
虽然通配选择器的功能强大,但是出于效率考虑,很少有人使用它。由于各个浏览器对每个元素上的默认边距都不一致,为了保证页面能够兼容多种浏览器,通常在Reset样式文件中,使用通配选择器进行重置,来覆盖浏览器的默认规则:
* { margin: 0; padding: 0; }
5,父代选择器 ,选中父代的样式,子类默认改变
6,子类选择器
h1 > strong {color:red;}
7,并集选择器
h1,p {
margin-top:50px;
color:red
}
8,结果伪类选择器