一、基础选择器
基础选择器是CSS选择器中最简单的一种，通过基础选择器可以选定HTML中所有的元素或某一特定元素。
1. 通配符选择器
通配符选择器“*”可以匹配HTML文档中所有的元素。
/* 选中所有元素 */
* {
color: red;
}
2. 元素选择器
元素选择器通过HTML元素名来选定元素，可以使用标签名、类名或ID名来进行选择。
/* 选中所有p标签 */
p {
color: red;
}
/* 选中class为foo的元素 */
.foo {
color: red;
}
/* 选中id为bar的元素 */
#bar {
color: red;
}
3. 属性选择器
通过属性选择器，我们可以根据属性的存在和属性值的匹配性来选定元素。
/* 选中拥有title属性的所有元素 */
[title] {
color: red;
}
/* 选中class为bar的title属性 */
[title="bar"] {
color: blue;
}
4. 伪类选择器
伪类选择器用于选中元素的特殊状态，如hover、active状态。
/* 鼠标悬停时改变a标签的背景颜色 */
a:hover {
background-color: yellow;
}
/* 点击a标签时改变a标签的颜色 */
a:active {
color: blue;
}
二、组合选择器
组合选择器是多个选择器组合使用的产物，主要包括字选择器、后代选择器、相邻兄弟选择器和普通兄弟选择器。
1. 后代选择器（Space Selector）
后代选择器用于选择元素的后代元素。
/* 选中ul元素下的所有li元素 */
ul li {
color: red;
}
2. 子选择器（Child Selector）
子选择器仅选择作为指定元素子元素的选定元素。
/* 选中nav元素下的所有直接子元素 */
nav > * {
background-color: yellow;
}
3. 相邻兄弟选择器（Adjacent Sibling Selector）
相邻兄弟选择器选择元素后面的相邻兄弟元素。
/* 选中class为foo的元素紧随在class为bar的元素后面的所有元素 */
.bar + .foo {
color: red;
}
4. 普通兄弟选择器（General Sibling Selector）
普通兄弟选择器也选择后面的兄弟元素，但是可以选择所有后面的满足条件的兄弟元素。
/* 选中在class为bar的元素后面的所有class为foo的元素 */
.bar ~ .foo {
color: red;
}
三、复合选择器
复合选择器是多个选择器组合而成的，是CSS选择器中最常用的选择器。
1. 复合选择器
/* 选中所有class为foo且是p标签的元素 */
p.foo {
color: red;
}
/* 选中所有class为foo和class为bar的元素 */
.foo.bar {
color: red;
}
/* 选中class为foo的div元素中class为bar的p元素 */
div.foo p.bar {
color: red;
}
2. 多重选择器
多重选择器是指同时作用于多个选择器的一种选择器。
/* 选中所有p和ul元素 */
p, ul {
color: red;
}
/* 选中class为foo和class为bar的所有元素 */
.foo, .bar {
color: red;
}
四、伪元素选择器
伪元素选择器用于选中元素文本的某一部分，并对其进行样式设置。
1. ::after伪元素
::after伪元素用于在元素内容之后添加内容，并在CSS中进行样式设置。
/* 在p元素内容后添加"（已结束）" */
p::after {
content: "(已结束)";
color: red;
}
2. ::before伪元素
::before伪元素和::after伪元素类似，但是是在元素内容之前添加内容。
/* 在h1元素内容前添加"#" */
h1::before {
content: "#";
color: blue;
}
五、总结
CSS选择器是网页开发的重要工具之一，合理运用选择器能够提高CSS样式的效率，减少代码量。在实际开发中，我们需要综合运用各种选择器，用最简洁的代码实现最复杂的样式。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/271088.html
微信扫一扫 
支付宝扫一扫 