Learn X in Y minutes：CSS 基础语法与级联机制完全指南（pt-br/css.md 深度解析）-平芜编程栈

文档
教程

【免费下载链接】learnxinyminutes-docs

Code documentation written as code! How novel and totally my idea!

项目地址：https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs

CSS（Cascading Style Sheets，层叠样式表）是一种独立于 HTML 的声明式语言，专门负责网页的外观呈现：HTML 负责标记页面内容，CSS 则决定这些内容如何被展示。本文以 Learn X in Y minutes 仓库中 pt-br/css.md（葡萄牙语版）为核心骨架，完整讲解 CSS 的选择器体系、属性与单位、级联优先级、媒体查询三大核心主题，并结合仓库自身的文档规范与工程约束，帮助你掌握从"能看懂 CSS"到"能写出可维护、可预测的样式表"的完整能力。

说明：本文基于仓库内 pt-br/css.md 撰写，同时参考了英文原版 css.md 与仓库整体文档规范（README.md、CONTRIBUTING.md）。CSS 是纯视觉语言，阅读本文时建议在 Dabblet 之类的 CSS playground 中即时实践，边看边练效果最佳。

1. CSS 是什么：从规则到渲染

CSS 代码由若干条静态规则（rules）构成。每条规则接受一个或多个选择器（selectors），并为一系列视觉属性（properties）赋予具体的值（values）；这些属性随后被应用到选择器所指向的页面元素上。

seletor { propriedade: valor; /* 更多属性... */ }

一次声明块中可以同时包含多个属性: 值对，例如：

h1 { font-size: 2em; color: white; background-color: black; }

本文以 CSS 2 为基础，并补充 CSS 3 的新特性（文中以(CSS 3)标注）。需要注意的是，CSS 注释只有一种形式——块注释，没有"单行注释"：

/* 这是唯一的注释形式，注释内容可以跨越多行 */

从仓库的文档组织方式看，每个语言教程文件都以 YAML frontmatter 开头，记录 contributors 与 translators 元数据，并由 lint/frontmatter.py 校验这些字段的合法性与类型（允许的键为name、where_x_eq_name、category、filename、contributors、translators）。这体现了本仓库"代码即文档、文档需可机器校验"的工程理念——你编写的每一份样式表也同样值得用可校验、可维护的方式来组织。

2. 选择器体系：精确定位页面元素

选择器用于"瞄准"页面上的一个元素。下面的示例元素贯穿本节的讲解：

<div class='class1 class2' id='anID' attr='value' otherAttr='pt-br foo bar' />

2.1 基础选择器：类、标签名、ID 与属性

类选择器——通过元素的一个 CSS 类选中它：

.class1 { }

多类组合——同时拥有两个类才命中：

.class1.class2 { }

标签名选择器：

div { }

ID 选择器：

#anID { }

属性选择器——只要元素带有该属性即命中：

[attr] { font-size: smaller; }

属性值精确匹配：

[attr='value'] { font-size: smaller; }

2.2 属性选择器的模糊匹配（CSS 3）

CSS 3 大幅扩展了属性选择器的表达能力：

以某值开头（^=）：

[attr^='val'] { font-size: smaller; }

以某值结尾（$=）：

[attr$='ue'] { font-size: smaller; }

在空格分隔的列表中包含某值（~=），适合匹配class="a b c"这类多值属性：

[otherAttr~='foo'] { } [otherAttr~='bar'] { }

在连字符分隔的列表中包含某值（|=），即匹配以-（U+002D）分隔的值，常用于语言代码前缀匹配：

[otherAttr|='pt'] { font-size: smaller; }

英文原版 css.md 还额外演示了[attr*='foo']（包含子串匹配）与[attr|='en']的写法，葡萄牙语版将其合并进~=与|=两类，含义一致。

2.3 组合选择器：复合与层级关系

复合选择器——把多个条件叠加，注意中间不能有空格，空格会改变语义：

div.some-class[attr$='ue'] { }

子元素（child）选择器——>表示"直接子元素"，只向下匹配一层树结构：

div.some-parent > .class-name { }

后代（descendant）选择器——空格表示"任意层级的后代"。子元素是直接后代（仅一层），后代可以是树中任意层级：

div.some-parent .class-name { }

警惕空格陷阱：同一个选择器去掉空格后含义完全不同——div.some-parent.class-name选中的是"同时拥有some-parent与class-name两个类的 div 元素"，而不是 div 内的后代。

相邻兄弟选择器——+选中紧随其后的兄弟元素：

.i-am-just-before + .this-element { }

一般兄弟选择器——~选中之前任意位置的兄弟元素：

.i-am-any-element-before ~ .this-element { }

2.4 伪类（pseudo classes）：按状态选中元素

伪类只在元素处于特定状态时命中：

seletor:hover {} /* 鼠标悬停在元素上时 */ seletor:visited {} /* 链接已被访问过 */ seletor:link {} /* 链接尚未被访问 */ seletor:focus {} /* 元素获得焦点 */ seletor:first-child {} /* 是父元素的第一个子元素 */ seletor:last-child {} /* 是父元素的最后一个子元素 */

英文原版 css.md 补充了:active（链接被点击瞬间）与:nth-child(n)（父元素下第 n 个子元素，CSS 3），并给出了一条重要经验：与链接相关的伪类:link、:visited、:focus、:hover、:active必须按上述顺序书写，否则代码可能不按预期工作。葡萄牙语版保留了核心的:hover、:visited、:link、:focus、:first-child、:last-child。

2.5 伪元素（pseudo elements）：样式化虚拟子节点

伪元素允许你为文档的特定"零件"设置样式，例如为元素添加虚拟的首个子元素与最后一个子元素（常用来做装饰性内容）：

seletor::before {} /* 匹配所选元素的一个虚拟首个子元素 */ seletor::after {} /* 匹配所选元素的一个虚拟最后一个子元素 */

注意伪元素使用双冒号::语法（CSS 3 起），与伪类的单冒号:区分。

2.6 通配符与分组

在合适的位置，*可作为通配符选中所有元素：

* {} /* 所有元素 */ .parent * {} /* 所有后代 */ .parent > * {} /* 所有直接子元素 */

2.7 进阶选择器补充

英文原版 css.md 还包含两条经常用到的进阶写法：

选择器分组——用逗号把多个选择器合并，共享同一组样式：

selector1, selector2 { }

否定伪类:not()（CSS 3）——选中不处于某状态/不匹配某条件的元素，例如选中所有没有id属性的 div：

div:not([id]) { background-color: red; }

3. 属性与单位：构建视觉效果的原料

选择器负责"找谁"，属性块负责"怎么画"。本节覆盖长度单位、颜色、边框、背景与字体五大类常用属性。

3.1 长度单位：相对与绝对

相对单位（随上下文缩放）：

width: 50%; /* 父元素宽度的百分比 */ font-size: 2em; /* 元素自身 font-size 的倍数 */ font-size: 2rem; /* 根元素 font-size 的倍数 */ font-size: 2vw; /* 视口宽度的 1% 的倍数 (CSS 3) */ font-size: 2vh; /* 视口高度的 1% 的倍数 (CSS 3) */ font-size: 2vmin; /* vh 与 vw 中较小的那个 */ font-size: 2vmax; /* vh 与 vw 中较大的那个 */

绝对单位（固定物理长度）：

width: 200px; /* 像素 */ font-size: 20pt; /* 磅（点） */ width: 5cm; /* 厘米 */ min-width: 50mm; /* 毫米 */ max-width: 5in; /* 英寸 */

3.2 颜色：从十六进制到函数式

CSS 提供了从简洁到丰富的多套颜色写法：

color: #F6E; /* 短十六进制（每位重复一次，等价于 #FF66EE） */ color: #FF66EE; /* 长十六进制 */ color: tomato; /* 具名颜色 */ color: rgb(255, 255, 255); /* RGB 数值写法 */ color: rgb(10%, 20%, 50%); /* RGB 百分比写法 */ color: rgba(255, 0, 0, 0.3); /* RGBA，含透明度 (CSS 3)，注意 0 <= a <= 1 */ color: transparent; /* 等价于把 alpha 设为 0 */ color: hsl(0, 100%, 50%); /* HSL 色相/饱和度/明度 (CSS 3) */ color: hsla(0, 100%, 50%, 0.3); /* HSLA，含 alpha 通道 */

葡萄牙语版中rgba(255, 0, 0, 0,3)与HSLA(0, 100%, 50%, 0,3)里的逗号应为小数点（0.3），英文原版 css.md 为正确的0.3写法，实际使用时请按0.3书写。

3.3 边框（英文原版补充）

英文原版 css.md 提供了边框的三段式写法与速记形式：

border-width: 5px; border-style: solid; border-color: red; /* 与 background-color 的设置方式类似 */ border: 5px solid red; /* 等价的三合一速记写法 */ border-radius: 20px; /* 圆角，CSS 3 属性 */

3.4 背景与字体

背景图片——url()内的引号是可选的：

background-image: url(/img-path/img.jpg);

字体族——按顺序依次回退，第一个找不到就尝试下一个：

font-family: Arial; font-family: "Courier New"; /* 名称含空格时必须加引号 */ font-family: "Courier New", Trebuchet, Arial, sans-serif; /* 回退链 */

3.5 CSS 3 进阶：变量、计算与嵌套（英文原版补充）

英文原版 css.md 还演示了 CSS 3 的四个高阶特性，强烈建议掌握：

自定义属性（CSS 变量）——在:root定义，通过var()引用：

:root { --main-bg-color: whitesmoke; } body { background-color: var(--main-bg-color); }

calc() 计算：

body { width: calc(100vw - 100px); }

规则嵌套（需配合预处理器或现代原生嵌套支持）：

.main { .bgred { /* 等价于 .main .bgred { } */ background: red; } & .bggreen { /* 等价于 .main .bggreen { } */ background: green; } &.bgblue { /* 无空格，等价于 .main.bgblue { } */ background: blue; } }

Flexbox 弹性布局：

.container { display: flex; flex-direction: row; /* flex 子项的排列方向 */ flex-wrap: wrap; /* flex 子项是否换行 */ justify-content: center; /* 子项水平方向的对齐方式 */ align-items: center; /* 子项垂直方向的对齐方式 */ }

4. 三种使用方式：把 CSS 接入 HTML

将样式文件保存为.css扩展名后，有三种方式接入 HTML：

<!-- 方式一（推荐）：在页面 <head> 中通过 <link> 引入外部样式表 --> <link rel="stylesheet" type="text/css" href="path/to/style.css" /> <!-- 方式二：在标记中内联 <style> 块 --> <style> a { color: purple; } </style> <!-- 方式三：直接在元素上写 style 属性（内联样式） --> <div style="border: 1px solid red;"> </div>

三种方式的优先级与可维护性差异在下一节"级联"中体现：外部样式表利于复用与缓存，<style>块适合单页微调，内联样式优先级最高但最不易维护。

仓库自身的文档也遵循类似"分层"原则：核心英文教程位于仓库根目录（如 css.md），各语言翻译按 ISO 语言代码放入子目录（如 pt-br/css.md），并由 lint/encoding.sh 校验所有 Markdown 文件必须为 UTF-8/US-ASCII 编码且不带 BOM——这份"工程约束"和 CSS 的"样式分层"一样，都是让大型协作项目保持秩序的关键。

5. 优先级与级联（Cascade）：理解样式为何"生效"

一个元素可能被多个选择器同时命中，同一属性也可能被声明多次。此时哪条规则胜出由级联规则决定：更具体的选择器优先于更不具体的；同特异性下，样式表中靠后的规则覆盖靠前的（这也意味着，若两个不同的外部样式表对同一元素定义了同特异性的规则，链接顺序靠后的那张表胜出）。

这个过程称为"级联（cascading）"，这正是CascadingStyle Sheets 名称的由来。

给定如下 CSS：

/* A */ p.class1[attr="value"] /* B */ p.class1 { } /* C */ p.class2 { } /* D */ p { } /* E */ p { property: value !important; }

以及如下标记：

<p style='/*F*/ property:value;' class='class1 class2' attr='value' />

样式优先级从高到低为：

E最高——因为!important关键字；官方建议尽量避免使用它；
F其次——因为是内联样式；
A再次——它比其余规则"更具体"：包含 3 个限定符（元素名p、类class1、属性attr="value"）；
C随后——尽管它与B特异性相同，但因为出现在B之后而胜出；
B；
D最后——最不具体的纯标签选择器。

关键提醒：优先级是按每一条属性分别计算的，而不是对整个声明块整体生效。同一选择器中某条属性可能被 A 规则覆盖，另一条属性却由 B 规则生效。

6. 媒体查询（Media Queries）：响应式与场景化样式

媒体查询是 CSS 3 特性，允许你指定"何时应用哪些规则"：打印时、特定屏幕尺寸、特定像素密度或屏幕阅读器场景下均可应用不同规则。媒体查询不会给选择器增加特异性。

/* 适用于所有设备的基础规则 */ h1 { font-size: 2em; color: white; background-color: black; } /* 打印时改用深字浅底，节省墨水 */ @media print { h1 { color: black; background-color: white; } } /* 屏幕宽度至少 480px 时放大字号 */ @media screen and (min-width: 480px) { h1 { font-size: 3em; font-weight: normal; } }

媒体查询支持的特性（media features）包括：width、height、device-width、device-height、orientation、aspect-ratio、device-aspect-ratio、color、color-index、monochrome、resolution、scan、grid。其中大部分特性可加min-或max-前缀形成范围条件。

两个实战注意点：

resolution特性在较老设备上不受支持，此时应改用device-pixel-ratio；
许多智能手机和平板在缺少viewportmeta 标签时，会试图像桌面端一样渲染页面。务必在<head>中加入：

<head> <meta name="viewport" content="width=device-width; initial-scale=1.0"> </head>

7. 兼容性：先查后用

CSS 2 的大多数特性（以及 CSS 3 的许多特性）在几乎所有浏览器和设备上均可用，但在使用新特性前养成先查兼容性的习惯总是明智的。可以借助 CanIUse 快速核对特性在各浏览器中的支持情况。

仓库的 lint/encoding.sh 用file -b --mime-encoding逐个检查 Markdown 文件的编码（拒绝非 UTF-8/US-ASCII 与带 BOM 的文件）——这种"工具化兜底"的思路同样适用于前端：在浏览器兼容性之外，用规范、lint 与自动化检查保障样式代码的可维护性。

8. 延伸学习资源

在线实践与参考：

CanIUse：按特性查询浏览器兼容性明细；
Dabblet：CSS 在线 playground，适合边学边试；
Mozilla Developer Network 的 CSS 文档：教程与权威参考；
Codrops CSS 参考：属性速查手册；
DevTips CSS 基础视频教程。

深入阅读：

理解 CSS 样式优先级：特异性（Specificity）、继承（Inheritance）与级联（Cascade）；
属性选择器的完整用法（见英文原版 css.md 中[attr*='foo']、[attr|='en']等写法）；
QuirksMode CSS：跨浏览器行为差异研究；
Z-Index 与层叠上下文（stacking context）：元素垂直堆叠的规则；
SASS 与 LESS：CSS 预处理器，为样式引入变量、嵌套与混合宏；
CSS-Tricks：社区实战技巧集散地。

同时，仓库本身也是绝佳的学习素材：对照英文原版 css.md 与葡萄牙语版 pt-br/css.md 可以顺带练习技术英语/葡语阅读，观察翻译过程中取舍（如葡语版精简了:active、:nth-child、border速记、CSS 变量等条目），体会"技术文档翻译"与"技术内容组织"的差异——这本身就是一份开源文档项目（README.md）教给读者的额外一课。