CSS选择器 是个调皮的小东西~~~

选择器：通过选择器可以选中页面中指定元素。

一。常用选择器：

1.元素选择器

        根据标签名来选中元素

        例：p{},div{},span{}

 

2.id选择器

        根据元素的id属性值选中一个元素

        例：#box{}， #box1{}

 

3.类选择器

        根据元素的class属性值选中一组元素(可以重复使用)

 

4.通配选择器

        选中页面中的所有元素

 

5.复合选择器

        选中同时复合多个条件的元素（交集选择器）

        语法：选择器1选择器2选择器3{}

        注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

 

6.选择器分组 （并集选择器）

                同时选择多个选择器对应的元素

 

二。关系选择器

        父元素 --直接关系

        子元素--直接关系

        祖先元素--直接或间接关系

        后代元素  --直接或间接关系

        兄弟元素--平行 （拥有相同的父元素）

1.子元素选择器

        作用：选中指定父元素的指定子元素

         语法：父元素 > 子元素

选中类box下（父元素）的第一个span（子元素）

2.后代元素选择器

        选中指定元素内的指定后代元素

        语法：祖先 后代

选中div下的所有span元素

 

3.兄弟元素选择器

        （1）选择下一个兄弟（紧挨着的那个）

                语法：前一个 + 下一个

p和span拥有相同的父元素，并且span紧挨着p

         （2）选择下边所有兄弟

                   语法： 兄 ~ 弟

选中p和span拥有相同的父元素，p下边的所有span

三。属性选择器

（1）属性选择器

          [属性名]选择含有指定属性的元素

          [属性名=属性值]  选择含有指定属性名和属性值的元素

          [属性名^=属性值]  选择属性值以指定值开头的元素

          [属性名$=属性值]  选择属性值以指定值结尾的元素

          [属性名*=属性值]  选择属性值以包含指定值的元素

 （2）伪类和伪元素

伪类：（不存在的类，特殊的类）

         伪类用来描述一个元素的特殊状态

         比如：第一个子元素、被点击的元素、鼠标移入的元素

         伪类一般情况下都是使用 ：开头

        例如：

                 :first-child 第一个子元素；

                 :last-child 最后一个子元素；

                 :nth-child() 第n个子元素；

                      n 第n个 n的范围是0到正无穷

                      2n  或even 表示选中偶数位的元素

                      2n+1 或 odd 表示选中奇数位的元素

 伪元素

        ::before  表示元素的最开头

        ::after    表示元素的最末尾

          before和after  必须结合content属性来使用

 伪元素的使用实例：

 

四。选择器的优先级

选择器权重：优先级越高，越优先显示

        !important 最高的优先级

        内联样式 1000

        id选择器 100

        类和伪类选择器 10

        元素选择器 1

        通配选择器 0

        继承的样式 没有优先级

注意：

（1）比较优先级时，需要将所有的选择器的优先级进行相加计算，优先级越高，越先  显示。

（2）“选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器。

（3）如果优先级计算后相同，此时则优先级使用靠下的样式。