HTML5中常见的选择器

功能：选中想要添加样式的元素
注：选择器选择的是离大括号最近的元素，如果是那个元素，就添加，不是就不添加。

1、基础选择器

元素选择器 : 要选择的标记名

类选择器 ：设定的class

ID选择器 ：设定的id

通配符 ：*

2、层次选择器

子级选择器 ：父元素>子元素

后代选择器 ：祖先元素 后代元素

兄弟选择器 ： 兄弟元素A+兄弟元素B——特点：AB之间不能有其他元素（相邻）

通用选择器 ： 兄弟元素A~兄弟元素B——特点：选择A之后所有的兄弟级元素B

否定选择器

:not()——小括号里是不想添加样式的元素
例：
:not(:nth-child(3)) 否定第三个元素

多个兄弟元素进行否定，则进行连续书写
例：
:not(:nth-child(3)):not(:nth-child(5))

3、伪类选择器

结构伪类选择器

:nth-child(n) ——匹配选择项父类下的第n个子项

:nth-of-type(n) ——匹配同类型的第n个元素

奇数项

:nth-child(odd)

:nth-child(2n+1)——此时的n默认取自然数

偶数项

:nth-child(even)

:nth-child(2n)

第一个

• :first-child

  :nth-child(1)

  :nth-of-type(1)

最后一个

• :last-child

  :last-of-type

  :nth-last-child(1) (从后往前数第一个)

  :nth-last-of-type(1) (从后往前数第一个)

:only 只有一个元素

:empty 没有子元素

动态伪类选择器

:link——未访问

:visited——已访问

:focus——焦点、激活(键盘tab) 例：input\a

:hover——悬停

:active——点击时

4、伪元素选择器

::first-line——选中第一行

::first-letter——选中第一个字（中），选中第一个字母（英）

::after——在当前标签之前添加内容

::before——在当前标签之后添加内容

当前标签与::after和::before层次关系为父子级关系

当前标签是父元素

::after和::before是子元素

::selection——设定选中区域的样式（注：目前只能改变背景和字体颜色）

5、属性选择器

属性名=“属性值”

书写格式： 元素[属性名=“属性值”]

例：div[class=“box”]

选中属性以XXX开始的元素

书写格式： 元素[属性名^=“XXX”]

例：div[class^=“box”]

选中属性以XXX结束的元素

书写格式： 元素[属性名$=“XXX”]

例：div[class$=“box”]

选中属性包含XXX的元素

书写格式： 元素[属性名*=“XXX”]

例：div[class*=“box”]