Skip to main content

WTF CSS 极简教程: 3. 选择器

WTF CSS 教程,帮助新人快速入门 CSS。

推特@WTFAcademy_@0xAA_Science

WTF Academy 社群: 官网 wtf.academy | WTF Solidity 教程 | discord | 微信群申请

所有代码和教程开源在 github: github.com/WTFAcademy/WTF-CSS


选择器是CSS规则的关键部分,用于指定哪些元素应用某个CSS规则。

选择器的种类

我们可以将 CSS 选择器分为以下四类:

  1. 基本选择器

  2. 分组选择器

  3. 组合选择器

  4. 伪选择器

1. 基本选择器

1.1 通用选择器

选择页面上所有元素。

语法:*

示例:

* {

}

1.2 元素选择器

按照给定的元素名称,选择所有匹配的元素。

语法:elementname

示例:

/* 匹配所有 <h1> 元素 */
h1 {

}

/* 匹配所有 <input> 元素 */
input {

}

1.3 类选择器

// 我有一个类名
<h1 class="one">Hello CSS</h1>

// 我有两个类名,分别为:"one" 与 "two"
<div class="one two ">Hello CSS</div>

我们可以给元素设置 class 属性,class 的值是一个以空格分隔的元素的类名(classes)列表,一个元素可以有多个类名。

类选择器就是按照给定的 class 属性的值,选择所有匹配的元素。类选择器以 . 开头,后面跟类名。

语法:.classname

示例:

/* 匹配所有 class 属性中含有 "one" 类的元素 */
.one {

}

1.4 ID选择器

// 我的 ID 为 "one"
<h1 id="one">Hello CSS</h1>

// 我的 ID 为 "two"
<span id="two">Hello CSS</span>

按照 id 属性选择一个与之匹配的元素。需要注意的是,一个文档中,每个 ID 属性都应当是唯一的。id 选择器以 # 开头,后面跟 id 值。

语法:#idname

示例:

/* 匹配 id 为 "one" 的元素 */
#one {

}

/* 匹配 id 为 "two" 的元素 */
#two {

}

1.5 属性选择器

按照给定的属性,选择所有匹配的元素。属性选择器,使用 [ ] 选取带有指定属性的元素。

语法:[attr]

示例:

/* 匹配 所有具有 type="text" 属性的元素 */
[type="text"] {

}

2. 分组选择器

2.1 选择器列表

选择器列表是将不同的选择器组合在一起的方法,常被称为并集选择器或并集组合器。选择器列表使用 , 分隔的列表来对选择器进行分组。

语法:A, B

示例:

/* 同时匹配 <div> 元素和 <span> 元素。 */
div, span {

}

3. 组合器

3.1 后代组合器

选择前一个元素的后代节点。

语法:A B

示例:

/* 匹配所有位于任意 <div> 元素之内的 <span> 元素。 */
div span {

}

3.2 直接子代组合器

选择前一个元素的直接子代的节点。

语法:A > B

示例:

/* 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。 */
ul > li {

}

3.3 一般兄弟组合器

选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。

语法:A ~ B

示例:

/* 匹配同一父元素下,<p> 元素后的所有 <span> 元素。 */
p ~ span {

}

3.4 紧邻兄弟组合器

选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。

语法:A + B

示例:

/* 匹配所有紧邻在 <p> 元素后的 <span> 元素。 */
p + span {

}

4. 伪选择器

4.1 伪类

CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。

示例:

/* 匹配选择具有焦点的 <input> 元素。 */
input:focus {

}

更多伪类详解

4.2 伪元素

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

示例:

/* 匹配所有 <p> 元素的第一行。 */
p::first-line {

}

更多伪元素详解请阅读MDN 教程

总结

这一讲,我们学习了非常重要的 CSS 选择器,掌握各种选择器并能灵活运用是CSS编程的关键!