这里先来一段HTML代码

 <div id="div" class="div">
<p class="div_P1"></p>
<span></span>
</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...等等,记住这三个靠前的就可以了。

05-26 20:11