CSS选择器（属性选择器，关系选择器，伪类选择器，伪元素选择器）
Posted 别Null.了
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器（属性选择器，关系选择器，伪类选择器，伪元素选择器）相关的知识，希望对你有一定的参考价值。
目录
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。（常用在input中）
类别
(1)E[att^=value] ：是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。
例如：
p[id^='yuan']{ /*表示匹配包含id属性，且p标签的id属性值是以'yuan'开头的*/
color: red;
}(2)E[att$=value] ：是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。
例如：
p[id$='chao']{ /*表示p标签的id属性值是以'chao'结尾的*/
color: blue;
}
(3)E[att*=value] ：用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。
例如：
p[class*='shi'] /*表示p标签的class属性值中包含'shi'字符串*/
{
font-size: 35px;
}应用
<html>
<style>
p[id^='beautiful']{ /*表示p标签的id属性是以you开头的 */
color:red
}
p[id$='people']{ /*表示p标签的id属性是以people结尾的*/
color:blue
}
p[class*='you']{ /*表示p标签的class属性中包含有you*/
font-size: 35px;
}
</style>
<body>
<p id="beautiful">你是世界上最美丽的人</p>
<p id="cutepeople">你是最可爱的人</p>
<p clss="yousmart">你是最智慧的人</p>
<p class="youcool">你是最酷的人</p>
</body>
</html>结果展示：
关系选择器
关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接。
子元素选择器
子元素择器主要用来选择某个元素的第一级子元素。
例如：希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong。
临近兄弟选择器
选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，且第二个元素必须紧跟第一个元素。
例如：
.p1+#p2{ /*关系选择器的临近兄弟选择器*/
font-size: 35px; /*选择器选择的p1和p2有同一个父亲div*/
}
<div>
<p class="p1">web前端开发</p>
<p id="p2">Java后台开发</p>
<p>大数据分析</p>
</div>普通兄弟选择器
使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，且第二个元素不必紧跟第一个元素。
伪类选择器
:root 选择器：用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
:not 选择器：如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
:only-child 选择器：用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。
:first-child和:last-child 选择器：分别用于为父元素中的第一个或者最后一个子元素设置样式。
:nth-child(n)和:nth-last-child(n) 选择器：分别表示选择第几个子元素或者倒数第几个子元素。
:nth-of-type(n)和:nth-last-of-type(n) 选择器：用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素。
:empty 选择器：用来选择没有子元素或文本内容为空的所有元素。
举例：
<html>
<body>
<style>
div p:first-child{ /*父类中的第一个子元素*/
color:red
}
div p:last-child{ /*父类中的最后一个子元素*/
color:blueviolet
}
div p:nth-child(3){ /*父类中的第几个子元素，此处为3*/
font-size: 35px;
}
div p:nth-last-child(2){ /*父类中的倒数第几个子元素，此处为2*/
color:palevioletred
}
</style>
<div>
<p>拼搏白天</p>
<p>我要上</p>
<p>清华大学</p>
<p>距离很远的</p>
<p>西安邮电大学</p>
</div>
</body>
</html>实现结果：
伪元素选择器
所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器。
:before选择器
:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。
<元素>:before
{
content:文字/url();
}
:after伪元素选择器
:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
以上是关于CSS选择器（属性选择器，关系选择器，伪类选择器，伪元素选择器）的主要内容，如果未能解决你的问题，请参考以下文章
Css3之高级-1 Css复杂选择器（兄弟选择器 属性选择器伪类选择器伪元素选择器）
web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）