only child

CSS选择器元素总结

⼀、属性选择器

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

E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的⼦字符串。需要注意的是E是可

以省略的，如果省略则表⽰可以匹配满⾜条件的任意元素。

2、E[att$=value]属性选择器

E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的⼦字符串。与E[att^=value]选

择器⼀样，E元素可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。

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

E[att*=value]选择器⽤于选择名称为E的标记，且该标记定义了att属性，att属性值包含value的⼦字符串。该选择器与前两个选择器⼀

样，E元素也可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。

⼆、关系选择器

1、⼦代选择器（>）

⼦代选择器主要⽤来选择某个元素的第⼀级⼦元素。例如希望选择只作为h1元素⼦元素的strong元素，可以这样写：h1>strong。

2、兄弟选择器（+，~）

兄弟选择器⽤来选择与某元素位于同⼀个⽗元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两

种。

（1）、临近兄弟选择器

该选择器使⽤加号“+”来链接前后两个选择器。选择器中的两个元素有同⼀个⽗亲，⽽且第⼆个元素必须紧跟第⼀个元素。

（2）、普通兄弟选择器

普通兄弟选择器使⽤“~”来链接前后两个选择器。选择器中的两个元素有同⼀个⽗亲，但第⼆个元素不必紧跟第⼀个元素。

三、结构化伪类选择器

1、:root选择器

:root选择器⽤于匹配⽂档根元素，在HTML中，根元素始终是html元素。也就是说使⽤“:root选择器”定义的样式，对所有页⾯元素都⽣

效。对于不需要该样式的元素，可以单独设置样式进⾏覆盖。

2、:not选择器

如果对某个结构元素使⽤样式，但是想排除这个结构元素下⾯的⼦结构元素，让它不使⽤这个样式，可以使⽤:not选择器。

如：body*:not(h3)

3、:only-child选择器

:only-child选择器⽤于匹配属于某⽗元素的唯⼀⼦元素的元素，也就是说，如果某个⽗元素仅有⼀个⼦元素，则使⽤“:only-child选择

器”可以选择这个⼦元素。

4、:first-child和:last-child选择器

:first-child选择器和:last-child选择器分别⽤于为⽗元素中的第⼀个或者最后⼀个⼦元素设置样式。

5、:nth-child(n)和:nth-last-child(n)选择器

使⽤:first-child选择器和:last-child选择器可以选择某个⽗元素中第⼀个或最后⼀个⼦元素，但是如果⽤户想要选择第2个或倒数第2个⼦元

素，这两个选择器就不起作⽤了。为此，CSS3引⼊了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选

择器的扩展。

6、:nth-of-type(n)和:nth-last-of-type(n)选择器

这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器⽤于匹配属于⽗元素的特定类型的第n个⼦元素和倒数第n个

⼦元素，⽽:nth-child(n)和:nth-last-child(n)选择器⽤于匹配属于⽗元素的第n个⼦元素和倒数第n个⼦元素，与元素类型⽆关。

7、:empty选择器

:empty选择器⽤来选择没有⼦元素或⽂本内容为空的所有元素。

8、:target选择器

:target选择器⽤于为页⾯中的某个target元素（该元素的id被当做页⾯中的超链接来使⽤）指定样式。只有⽤户单击了页⾯中的超链接，并

且跳转到target元素后，:target选择器所设置的样式才会起作⽤。

四、伪元素选择器

1、:before选择器

:before伪元素选择器⽤于在被选元素的内容前⾯插⼊内容，必须配合content属性来指定要插⼊的具体内容。其基本语法格式如下：

<元素>:before

{

content:⽂字/url();

}

在上述语法中，被选元素位于“:before”之前，“｛｝”中的content属性⽤来指定要插⼊的具体内容，该内容既可以为⽂本也可以为图

⽚。

2、:after选择器

:after伪元素选择器⽤于在某个元素之后插⼊⼀些内容，使⽤⽅法与:before选择器相同。

五、链接伪类

1、链接伪类

在CSS中，通过链接伪类可以实现不同的链接状态。所谓伪类并不是真正意义上的类，他的名称是由系统定义的，通常由标记名、类名或id

名加“:”构成。超链接标记的伪类有4种，具体如下表所⽰。