简单说说常用的css选择器

这里先来一段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...等等，记住这三个靠前的就可以了。