CSS的基本规则和选择器

2025-03-05

CSS

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言。它描述一个网页的表现与展示效果。可以用它来选择性地为 HTML 元素添加样式。

你好，我是Even。

当你浏览那些精美的网站时，是否曾惊叹于它们的视觉效果？柔和的渐变、灵动的动画、层次分明的排版……这些看似魔法般的设计，实际上很多都是由 CSS 赋予的。如果说HTML是一栋房子的框架，CSS就是在框架上做精装修，让房子焕发光彩，为住户带来赏心悦目的体验。

今天我们就从最基础的学起，CSS的基础规则和选择器。

现在，我们简单创建一个html文件，假设我们已经有了一个p元素，Hello, Even，现在在网页上它是什么样的呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS的基本规则和选择器</title>
</head>
<body>
  <p>Hello, Even</p>
</body>
</html>

和我们想的一样，网页中会出现一行看起来没有带任何样式的文本：Hello, Even。从HTML的角度上看，这行文本是一个段落。我们按F12打开开发者模式，会发现这个p元素其实并非没有样式，尽管我们没有给它添加样式，但它其实是会应用上浏览器的默认样式表。

现在我们想把这个段落变成红色的，我们应该怎么添加CSS呢？一般我们有三种声明样式的方法，外部 CSS，内部CSS和内联CSS。

<!-- 外部CSS，href中为外部文件的路径 -->
<link rel="stylesheet" href="styles.css">
<!-- 内部CSS -->
<style> p { color: red; } </style>
<!-- 内联CSS -->
<p style="color: red;">Hello, world</p>

为了演示方便，我们这里采用内部CSS的方式，一般项目代码里我们会采用外部CSS来声明。注意，无论是内部CSS还是外部CSS，都要在<head>标签的内部进行声明。

整个结构称为规则集（规则集通常简称为规则），注意各个部分的名称：

选择器（Selector）

HTML 元素名位于规则集的开头。它定义了需要添加样式的元素（本例中就是 元素）。要给不同的元素添加样式，只需要更改选择器。

声明（Declaration）

它是一条单独的规则（如 color: red;）。用来指定为元素的哪个属性添加样式。

属性（Properties）

它是为 HTML 元素添加样式的方式（本例中 color 就是 元素的属性）。在 CSS 中，你可以选择要在规则中影响的属性。

属性值（Property value）

位于属性的右边，冒号后面即属性值。它从指定属性的可选值中选择一个值（例如，我们除了 red 之外还有很多属性值可以用于 color）。

注意其他重要的语法：

除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

如果要在规则集中同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

也可以选择多个元素并为它们添加单个规则集，多个选择器之间用逗号分隔。例如：

p,
li,
h1 {
  color: red;
}

了解了基本规则，接下来我们再细聊一下都有哪些选择器以及他们的具体用法吧！

1. 元素选择器
选择一个 HTML 标签/元素

/* 选择所有的span, strong, em元素 */
span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}

2. 全局选择器
全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。

/* 1. 移除文档中所有元素的外边距（一般在重置样式表中使用） */

* {
  margin: 0;
}

/* 2. 使用全局选择器，让选择器更易读 */

/* 选中所有article元素的第一个子元素 */
article :first-child {
}

/* 选择作为其他元素的第一子元素的<article>元素 */
article:first-child {
}

/* 为避免上面两者混淆可以添加全局选择器 */
article *:first-child {
}

3. 类选择器
类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件

/* 应用在所有class属性存在highlight的元素上 */
.highlight {
  background-color: yellow;
}

/* 应用在特定元素中class属性存在highlight的元素上 */
h1.highlight {
  background-color: pink;
}

/* 应用在class属性同时存在notebox和warning的元素上 */
.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

4. ID选择器
ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，你可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。在下面的示例里，你可以看看这两种用法。

/* 应用在id属性为one的那个元素上 */
#one {
  background-color: yellow;
}

/* 应用在id属性为heading的h1元素上 */
h1#heading {
  color: rebeccapurple;
}

5. 属性选择器
用来选中带有特定属性的元素

/* 匹配带有一个名为attr的属性的元素——方括号里的值 [attr] */
a[title] {
  color: red;
}

/* 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。 [attr=value] */
a[href="https://example.com"] {
  color: red;
}

/* 还有其他的匹配方式，例如 ~=（包含value）|=（值为value或value-开头）^=（value开头） $=（value结尾） */

另外，如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML 中是大小写敏感的。

6. 伪类和伪元素选择器
伪类用于选择处于特定状态的元素。比如当它是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。这些状态是已经定义好的，它们分别对应:first-child，:hover，注意，他们都以:开头。

/* :hover —— 鼠标悬停时，链接变红。 */
input:focus { border: 2px solid blue; }
/* :focus —— 选中输入框时，边框变蓝。 */
button:active { background-color: yellow; }
/* :first-child —— 选中父元素的第一个子元素。 */
p:first-child { font-weight: bold; }
/* :last-child —— 选中父元素的最后一个子元素 */
li:last-child { color: green; }
/* :nth-child(n) —— 选中父元素的第 2 个子元素。 */
div:nth-child(2) { background-color: lightgray; }
/* :nth-child(odd/even) —— 选中奇数行/偶数行，用于表格隔行变色。 */
tr:nth-child(odd) { background-color: #f0f0f0; }

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号:: 。

/* ::before & ::after 用于在元素前/后插入内容，常用于装饰 */
h1::before { content: "🔥 "; } 
h1::after { content: " ✨"; }
/* ::first-letter选中段落的首字母，放大并变红。 */
p::first-letter { font-size: 2em; color: red; }
/* ::first-line选中段落的第一行 */
p::first-line { font-weight: bold; }

7. 关系选择器
Descendant选择器
简单来说就是不强制子元素，可以是子元素的子元素…，是后代即可。

用单个空格（" "）字符组合多个选择器，后代选择器 (body article p)会匹配第一个选择器的后代中存在第二个选择器，一直到最后一个选择器为止所对应的元素（即body选择器选中body元素，其后代中中存在article选择器选中的article元素，article元素后代中存在p选择器选中的p元素，因此p元素被选中了）。

<body>
	<div>
		<article>
			<div>
				<p></p>
			</div>
		</article>
	</div>
</body>

/* 后代选择器 */ body article p { color: red; }

Child选择器
子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为<article>的直接子元素的元素：

<body>
	<article>
		<p></p>
	</article>
</body>

/* 子代关系选择器 */ article > p { color: red; }

Next-Sibling选择器
Next-Sibling选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随元素之后的<img>元素： p + img

Subsequent-Sibling选择器
如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用Subsequent-Sibling选择器（~）。要选中所有的元素后任何地方的<img>元素，我们会这样做：p ~ img

8. 选择器列表
通常，为了满足DRY原则，我们可以将使用相同样式的不同选择器通过,分隔，混编为一个选择器列表，例如

h1 {
  color: blue;
}

.special {
  color: blue;
}

/* 与下面等同，但如果选择器列表中混了一个无法起作用的选择器会导致整个选择器失效 */

h1, .special {
  color: blue;
}

好了，学会了这些就可以给页面中的组件加上样式啦～但这些还只是CSS的基础，继续加油！

你好Even

CSS的基本规则和选择器

评论区 (5)

发布评论