CSS选择器

常用CSS选择器（作用就是从HTML页面中找出特定某类元素）：

伪元素选择器

伪类选择器

1.属性选择器

• E[att^=value]属性选择器

  **E[att^=value]**属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。

• **E[att$=value]**属性选择器

  E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。

• *E[att=value]**属性选择器

  *E[att=value]**选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value的子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。

2.关系选择器

• 子代选择器（>）
  主要用来选择某个元素的第一级子元素，例如：
  希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong。

• 兄弟选择器（+、~）
  用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。

（1）临近兄弟选择器（使用加号“+”来链接前后两个选择器）
（2）普通兄弟选择器（使用 “~”来链接前后两个选择器）

3.结构化伪类选择器

用于匹配文档根元素，根元素始终是html元素，使用“:root选择器”定义的样式，对所有页面元素都生效。

如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
如： body *:not(h3)
:only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素

:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。

使用**:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素**，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。

不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素，与元素类型无关。

:empty选择器用来选择没有子元素或文本内容为空的所有元素。

:target选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。