简单说说常用的css选择器

这里先来一段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标签常用的属性，在这里不多说
{
    content:"haha";
}

span:after    //在span标签后增加haha字
{
    content:"haha";
}

span:before    //在span标签前增加haha字
{
    content:"haha";
}

div span:nth-child(1)   //这里表示选中的是div下面的第一个子元素,括号里面的也可以表示奇数或者偶数
{
    content:"haha";
}
div span:nth-type-of(1)   //这里表示选中的是div下面同类型（所有span就是同类型的）的第一个子元素,括号里面的也可以表示奇数或者偶数
{
    content:"haha";
}

.div:not(.div_P1){    //在div下除.div_P1的元素

   color:red;
}

还有就是我们的属性选择器：这里就不多说了，不常用

最后还有一个权重问题，权重的话行内嵌入的权重是最高的，其次是id，后面是class...等等，记住这三个靠前的就可以了。