这里先来一段HTML代码
1 <div id="div" class="div"> 2 <p class="div_P1"></p> 3 <span></span> 4 </div>
先来看看我们的简单选择器：以id和class为主，其次还有属性通配符和标签等等，但是这些都是不常用的
这个我们就不举例子来说了，大家都会
关系选择器来说的话：存在子代，兄弟等等，不多说简单来点常用例子
.div>sapn{ //选中.div全部的子代span color:red; } .div sapn{ //选中.div全部的后代span color:red; } .div>span,.div>.div_p1{ //选中.div全部的子代span和.div_p1 color:red; } p+sapn{ //选中p后面的每个span color:red; }
还有我们的伪类选择器，简单来几个：
span:hover //这是a标签常用的属性，在这里不多说
{
color:red;
}
span:after //在span标签后增加haha字
{ content:"haha"; }
span:before //在span标签前增加haha字
{ content:"haha"; }
.div span:nth-child(1) //这里表示选中的是div下面的第一个子元素,括号里面的也可以表示奇数或者偶数 {
color:red;
}
.div span:nth-type-of(1) //这里表示选中的是div下面同类型（所有span就是同类型的）的第一个子元素,括号里面的也可以表示奇数或者偶数 {
color:red;
}
.div:not(.div_P1){ //在div下除.div_P1的元素 color:red; }
还有就是我们的属性选择器：这里就不多说了，不常用
最后还有一个权重问题，权重的话行内嵌入的权重是最高的，其次是id，后面是class...等等，记住这三个靠前的就可以了。