一、基础选择器
基础选择器是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样式的效率,减少代码量。在实际开发中,我们需要综合运用各种选择器,用最简洁的代码实现最复杂的样式。