本文详细介绍了CSS选择器的种类和用法，包括基本选择器（标签、类、ID、通配符）、复合选择器（属性、关系、并集、后代）、伪类选择器（动态、结构化）以及伪元素选择器（before、after、段落伪元素）。通过实例展示了如何使用这些选择器来定位和风格化网页元素，如选择特定属性、子元素、相邻兄弟元素等，以及如何利用伪类实现动态效果和结构化选择。此外，还提到了CSS3新增的伪类选择器。
CSS选择器
1 基本选择器
基本选择器用来在CSS中定位页面中的标签。
1、标签名选择器
标签名{
样式属性: 值;
}
2、类选择器。若使用类选择器，则标签中必须有class属性。格式为：
.类名{
样式属性: 值;
}
3、id选择器。若使用id选择器，则标签中必须有id属性。格式为：
#id名{
样式属性: 值;
}
4、通配符选择器。通配符选择器用来匹配所有的元素，格式为：
*{
样式属性: 值;
}
2 复合选择器
2.1 属性选择器
| 样式 | 含义 | 示例 |
|---|---|---|
标签名[属性名] | 选择含有给定属性的标签 | p[class]：选择p标签中含有class属性的元素 |
标签名[属性名=值] | 选择等于给定属性值的标签 | p[class=p2]：选择p标签中含有class属性，class属性值为p2的元素 |
标签名[属性名^=值] | 选择给定属性值是以某个字符开头的 | p[id^=abc]：选择p标签中含有id属性，且id属性以abc开头的元素 |
标签名[属性名$=值] | 选择给定属性值是以某个字符结尾的 | p[id$=d2]：选择p标签中含有id属性，且属性值以d2结尾的元素 |
标签名[属性名*=值] | 选择包含给定属性值的标签 | p[class*=p]：选择p标签中含有class属性，且class属性值包含p的元素 |
2.2 关系选择器
2.2.1 子元素选择器“>”
子元素择器主要用来选择某个元素的第一级子元素，子元素选择器用>进行连接
<div>
<p>橘猫吃不胖</p>
<span>橘猫吃不胖</span>
</div>
选择div标签下面的p标签中的文字颜色变成红色，CSS样式为：
div > p{
color: red;
}
2.2.2 相邻兄弟选择器“+、~”
相邻兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。相邻兄弟关系选择器用+、~进行连接。
（1）临近兄弟选择器
该选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父元素，第二个元素必须紧跟第一个元素。相邻兄弟选择器只对某一元素之后的第一个匹配的相邻兄弟起作用。
<body>
<div>
<p>橘猫吃不胖</p>
<span>橘猫吃不胖</span>
</div>
<p>橘猫吃不胖</p>
<span>橘猫吃不胖</span>
</body>
匹配p标签后的第一个span标签：
p + span{
color: peru;
}
（2）普通兄弟选择器
普通兄弟选择器使用 “~”来连接前后两个选择器。选择器中的两个元素有同一个父元素，但第二个元素不必紧跟第一个元素。普通相邻兄弟选择器对相关元素之后的所有匹配的兄弟元素都起作用。
<body>
<div>
<p>橘猫吃不胖</p>
<p>橘猫吃不胖</p>
</div>
<p>橘猫吃不胖</p>
<p>橘猫吃不胖</p>
</body>
匹配div标签后的所有p标签：
div ~ p{
color: powderblue;
}
2.3 并集（复合）选择器
复合选择器用逗号“,”分隔，表示同时选中多个元素。
<div class="jm">橘猫吃不胖</div>
<span>橘猫吃不胖</span>
<p id="p1">橘猫吃不胖</p>
让div、span、p元素同时显示粉色，字体放大：
.jm, #p1, span {
color: deeppink;
font-size: 20px;
}
2.4 后代选择器
后代选择器用来选择某元素下面的子孙后代，中间用空格隔开。格式：
父级 子集{
属性: 值;
}
示例代码如下：
<div id="jm">
<div>
<p id="p1">橘猫吃不胖</p>
</div>
<p id="p2">橘猫吃不胖</p>
</div>
<p>橘猫吃不胖</p>
选择div标签内所有p标签：
#jm p {
color: pink;
}
2.5 伪类选择器
2.5.1 动态伪类
| 样式 | 含义 |
|---|---|
| a:hover | 当鼠标悬停（移动）在目标对象上时的样式 |
| a:visited | 被访问过的超链接的样式 |
| a:link | 超链接未被访问的样式 |
| a:active | 激活超链接时的样式 |
它们生效的顺序遵循“爱恨原则”，即 LoVe/HAte 。
2.5.2 结构化伪类选择器
| 样式 | 含义 |
|---|---|
| :root | 匹配文档的根元素，在HTML中，页面的根元素是<html>，也就是说该选择器设置的样式，对页面的所有元素均有效。对于不需要该样式的元素，可以单独设置样式进行覆盖。 |
| :not(element) | 匹配不是element的元素 |
| :only-child | 匹配只有一个子元素的元素 |
| :first-child | 匹配父元素中的第一个子元素 |
| :last-child | 匹配父元素中的最后一个子元素 |
| :nth-child(n) | 匹配父元素中正数第n个元素 |
| :nth-last-child(n) | 匹配父元素中倒数第n个元素 |
:not(element) 示例：
<div>
<p>橘猫</p>
<p>吃不胖</p>
<div>橘猫吃</div>
<div>不胖</div>
</div>
选择div下不是p标签的元素：
/* 注意div与:not()选择器之间有一个空格，否则可能不起作用 */
div :not(p){
color: red;
}
:only-child 示例：
<div>
<p>床前明月光</p>
<p>疑是地上霜</p>
<div>
<p>举头望明月</p>
</div>
</div>
<div>
<p>低头思故乡</p>
</div>
选择div中只有一个子元素的元素：
/* div与:only-child选择器之间有一个空格，否则可能不起作用 */
div :only-child {
/* 将只有一个标签的div标签选择出来，并修改文字颜色为蓝色 */
color: slateblue;
}
:first-child :last-child 示例：
<div>
<span>静夜思</span>
<p>李白</p>
<div>床前明月光</div>
</div>
选择div中第一个元素和最后一个元素：
/* 下面两个div与选择器之间都有一个空格，否则可能不起作用 */
/* 选择div标签中第一个元素，将其背景颜色改为橙色 */
div :first-child {
background-color: orange;
}
/* 选择div标签中最后一个元素，将其文字颜色变为粉色 */
div :last-child {
color: plum;
}
:nth-child(n) :nth-last-child(n) 示例：
<div>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
</div>
选择div下第2个和倒数第3个元素：
/* 下面两个div与选择器之间都有一个空格，否则可能不起作用 */
/* div中正数第二个元素背景颜色变为粉色 */
div :nth-child(2) {
background-color: pink;
}
/* div中倒数第三个元素文字颜色变为红色 */
div :nth-last-child(3){
color: red;
}
2.6 伪元素选择器
2.6.1 before和after
伪元素选择器是针对CSS中已经定义好的元素使用的选择器。
| 样式 | 含义 |
|---|---|
| ::before | 在匹配的元素之前添加指定的内容，要和content结合使用 |
| ::after | 在匹配的元素之后添加指定的内容，要和content结合使用 |
格式为：
元素::before{
content: "插入的内容"/url();
}
示例代码：
<p>床前明月光</p>
<p>疑是地上霜</p>
在所有p标签之前添加“静夜思”：
p::before {
/* 在所有p标签前面添加“静夜思” */
content: "静夜思";
}
2.6.2 段落的伪元素
| 样式 | 含义 |
|---|---|
| p:first-line | 选中段落第一行的 |
| p:first-letter | 选中段落首字母的 |
示例代码：
<p class="p1">橘猫吃不胖<br>橘猫吃不胖</p>
<p class="p2">橘猫吃不胖</p>
CSS样式如下：
.p1:first-line {
/* 段落第一行字体大小为40像素 */
font-size: 40px;
}
.p2:first-letter {
/* 段落第一个字颜色为深粉色 */
color: hotpink;
}
3 CSS3新增的伪类选择器
| 伪类 | 说明 |
|---|---|
| elem:nth-child(n) | 选中父元素下的第n个子元素 |
| elem:nth-last-child(n) | 选择父元素倒数第n个子元素 |
| elem:last-child | 选中最后一个子元素 |
| elem:only-child | 选择元素，该元素是父元素唯一的子元素 |
| :not(elem) | 选择非elem元素的每一个元素 |
| elem:empty | 选中不包含子元素和内容的elem类型的元素 |
| elem:target | 选中当前活动的elem元素 |
| :enabled | 选择可用的表单元素 |
| :disabled | 选择禁用的表单元素 |
| :checked | 选择被选中的表单元素 |
| elem:nth-of-type(n) | 匹配第n个elem元素 |
| elem:first-of-type | 匹配第1个elem元素 |
| elem:last-of-type | 匹配第2个elem元素 |
| elem:only-of-type | 匹配只有一个子元素，且子元素为elem的元素 |
扫一扫
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
