CSS常见选择器

1.元素选择器(标签选择器)

语法：标签名{}

作用：选中对应标签包裹的内容

例子：h1{},h2{},p{},div{},span{}

 2、id选择器 (id属性值不可以重复使用)

语法：#id属性值{}

作用：选中对应的id属性值的内容

例子：#p1{},#pp{},#abc{}

3、class选择器（用法跟id选择器是一样的，只不过它可以复用）

语法：.class属性值{}

作用：选中对应class属性值的内容

例子：.pp{},.p1{}

4、通配选择器

语法：*{}

作用：选中页面中所有的标签

5.复合选择器

复合选择器有两种：

1、交集选择器

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

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

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

2、并集选择器

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

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

6.关系选择器

 1、子元素选择器

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

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

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

2、后代选择器

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

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

例如：#big span{}

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

作用：选择下一个兄弟

语法：兄+弟{}

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

语法：兄～弟{}

7.属性选择器

语法：[属性名]{} 选择含有指定属性的元素

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

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

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

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

8.伪类选择器

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

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

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

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

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

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

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

特殊值： n 所有的

2n或even 选中偶数

2n+1或odd 选中奇数

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

1、:first-of-type

2、:last-of-type

3、:nth-of-type()

功能跟上面相似，

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

not() 否定伪类

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