常用的CSS3选择器
大家好，又见面了，我是你们的朋友全栈君。
目录
CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类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）普通兄弟选择器 普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。
三、结构化伪类选择器
- :root选择器 :root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
- :not选择器 如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。 如： body *:not(h3)
- :only-child 选择器 :only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。
- :first-child和:last-child选择器 :first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
- :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选择器的扩展。
- :nth-of-type(n)和:nth-last-of-type(n)选择器 在上一节介绍了:nth-child(n)和:nth-last-child(n)选择器，并实现了一些简单的页面效果，本节将引入: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个子元素，与元素类型无关。 :nth-of-type的值还可以设为odd或2n-1（奇数），even或2n（偶数），即为选择所有排序为奇数或偶数的元素
- :empty选择器 :empty选择器用来选择没有子元素或文本内容为空的所有元素。
- :target选择器
:target选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。
PS：在用
<p>标签进行嵌套时要注意，<p>标签不能嵌套块级元素甚至不能嵌套<p>元素，只能嵌套内联元素，不然对<p>嵌套的块级元素设置CSS不起作用。 比如：用:only-child选择器来修饰<p>的嵌套元素，看是否起作用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1:only-child{
color: red;
}
li:only-child{
color:red;
}
</style>
</head>
<body>
<p>
<h1>星际穿越</h1>
</p>
<ul>
<li>海贼王</li>
</ul>
<ul>
<li>斗罗大陆</li>
<li>武庚纪</li>
<li>斗破苍穹</li>
</ul>
</body>
</html>页面效果：
效果很明显，嵌套在<p>元素里面的子元素<h1>字体颜色没有变红，说明<p>嵌套的块级元素设置CSS不起作用.
四、伪元素选择器
1.:before选择器 :before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。其基本语法格式如下： <元素>:before { content:文字/url(); } 在上述语法中，被选元素位于“:before”之前，“｛｝”中的content属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片。 2.:after选择器 :after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
五、链接伪类
1.链接伪类
在CSS中，通过链接伪类可以实现不同的链接状态。所谓伪类并不是真正意义上的类，他的名称是由系统定义的，通常由标记名、类名或id名加“:”构成。超链接标记<a>的伪类有4种，具体如下表所示。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157226.html原文链接：https://javaforall.cn
腾讯云开发者
