css常用选择器

一、css复合选择器

1.交集选择器

作用：选中同时满足多个条件的元素

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

      注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位例：

例：

效果图：

      2、并集选择器

      作用：同时选中满足条件的元素

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

例：

效果图：

二、 关系选择器

1、子元素选择器

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

      语法：父元素>子元素{}

      例如：div>p,.big>p,#big>p{}

例：

2、后代选择器

      作用：选中指定祖先元素下面指定的后代元素

      语法：祖先元素 后代元素{}

      例如：#big span{}

例：

3、 选择下一个兄弟(紧挨着的)选择器

      作用：选择下一个兄弟

      语法：兄+弟{}

例：

4、选择下面所有的兄弟(前面的不选)

      语法：兄～弟{}

例：

5.元素之间的关系

父子关系

         父元素：直接包含子元素的元素

         子元素：直接被父元素包含的元素

      祖先后代关系

         祖先元素：直接或间接包含的元素，包含父元素

         后代元素：直接或间接被包含的元素，包含子元素

      兄弟关系

         拥有共同父元素的元素

三、属性选择器

语法：

1.【属性名】{}选择含有指定属性的元素

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

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

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

 5.[属性名*=属性值]{} 选择属性值含有某值的元素

四、伪类选择器

1.伪类（不存在的类，特殊的类）

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

          -比如：第一个元素，被点击的元素，鼠标移入的元素···

          -特点：一般请情况下，使用：开头

 a、 :first-child  第一个子元素

             b、 :last-child   最后一个子元素

             c、 :nth-child()  选中第n个子元素

                   特殊值： n    所有的

                          2n或even  选中偶数

                          2n+1或odd  选中奇数

2.

以上这些伪类都是根据所有的子元素进行排序

             1、:first-of-type

             2、:last-of-type

             3、:nth-of-type()

                  功能跟上面相似，

              不同的是，这是在同类型的子元素中去选择

:not() 否定伪类

           -将符合条件的元素从选择器中去除

3.元素的伪类

:link        表示未访问过的a标签
:visited    表示访问过的a标签

以上两个伪类是超链接所独有的
由于隐私的问题，所以visited这个伪类只能修改链接的颜色

以下两个伪类是所有标签都可以使用
:hover        鼠标移入后元素的状态
:active        鼠标点击后，元素的状态 

4.伪类元素

常见的几个伪元素：

::first-letter    表示第一个字母

::first-line       表示第一行

::selection     表示选中的元素

::before         元素开始的位置前

::after            元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)