CSS是控制网页外观的核心技术，但很多人在刚接触时会疑惑：CSS元素到底指什么？严格来说，CSS里没有“元素”这个概念，大家常说的CSS元素通常包含两层含义：一是CSS选择器所匹配的HTML元素类型，二是CSS规则本身的组成部分。把这两层含义理清楚，写样式时就不会再迷煳了。本文将从选择器类型、HTML元素在CSS中的分类表现、CSS规则结构三个方面展开讲解。
一、CSS选择器可以匹配哪些目标
选择器是CSS规则的第一部分，用来告诉浏览器“这条样式要作用于谁”。最基础的是标签选择器，直接写元素名，比如p、div、h1，页面中所有该标签都会被选中。它适合设置全局性的基础样式，例如全站正文文字大小，但缺点是无法精确到某一个特定元素。
类选择器和ID选择器是日常使用频率最高的两种。类选择器以点号开头，例如.btn-primary，同一个类名可以在页面中重复使用，适合批量控制样式；ID选择器以井号开头，例如#header，在规范要求下整个页面只能出现一次，优先级也更高。两者对比如下：
/* 标签选择器：所有段落 */
p { font-size: 16px; color: #333; }
/* 类选择器：可复用 */
.btn-primary {
background-color: #1e90ff;
color: #fff;
padding: 8px 20px;
}
/* ID选择器：页面唯一 */
#header {
height: 60px;
border-bottom: 1px solid #ddd;
}除了这三种，还有属性选择器、后代选择器、子元素选择器和分组选择器。属性选择器可以根据HTML属性筛选元素，例如input[type="text"]只选中文本输入框；后代选择器用空格连接，例如.nav a表示导航容器内的所有链接；子元素选择器用>符号，只匹配直接子级；分组选择器用逗号分隔多个选择器，让它们共享同一组样式声明，能有效减少重复代码。
二、伪类和伪元素有什么区别
伪类以单冒号开头，描述的是元素所处的“状态”。常见的有:hover（鼠标悬停）、:active（点击瞬间）、:focus（获得焦点）、:first-child（第一个子元素）、:nth-child(n)（第n个子元素）。这些状态并不是真实存在于HTML结构中的类，而是浏览器根据用户行为或元素位置动态计算的。
伪元素以双冒号开头，用来选中元素内部的某个“虚拟部分”。例如::before和::after可以在元素内容前后插入装饰性内容，::first-line控制首行样式，::placeholder控制输入框占位文字。需要注意，使用::before时必须配合content属性，否则不会显示。
/* 伪类：按钮悬停变色 */
.button:hover { background-color: #ff6600; }
/* 伪类：列表隔行变色 */
li:nth-child(even) { background-color: #f7f7f7; }
/* 伪元素：清除浮动常用写法 */
.clearfix::after {
content: "";
display: block;
clear: both;
}一个容易踩坑的地方是优先级问题。当标签选择器、类选择器、ID选择器和内联样式同时作用于同一元素时，浏览器按“内联样式 > ID > 类 > 标签”的顺序判断权重。如果两条规则权重相同，则后写的生效。理解这一点对排查“样式为什么不生效”非常关键。
三、HTML元素在CSS中的显示类型
从布局角度看，HTML元素在CSS中按display属性分为块级元素、行内元素和行内块元素三类。块级元素如div、p、h1、ul，默认独占一行，可以设置宽高、内外边距；行内元素如span、a、strong，与其他内容同行排列，直接设置宽高无效；行内块元素如img、input，既能在同一行显示，又能设置宽高。
| 显示类型 | 代表元素 | 是否独占一行 | 能否设置宽高 |
|---|---|---|---|
| block（块级） | div、p、h1、ul | 是 | 能 |
| inline（行内） | span、a、strong | 否 | 不能 |
| inline-block（行内块） | img、input、button | 否 | 能 |
显示类型可以通过display属性互相转换，这也是布局中的常用手段。比如想让多个div排成一行，除了用浮动和弹性布局，最简单的办法就是把它们改成inline-block：
.box {
display: inline-block;
width: 200px;
height: 100px;
margin-right: 10px;
background-color: #eef;
}现代布局中，display: flex和display: grid使用越来越多，它们本质上也是修改元素的显示类型，让容器获得弹性或网格布局能力。掌握这些类型之后，处理图文混排、导航条、卡片列表等常见结构就会得心应手。
四、一条完整的CSS规则由哪些部分组成
最后回到CSS本身的结构。一条CSS规则由选择器和声明块组成，声明块内是若干条“属性：值”的组合，每条声明以分号结尾。属性决定了要修改哪方面的样式，比如color、font-size、margin；值则给出具体内容，比如red、14px。理解这个结构后，阅读任何样式表都不再困难。
选择器 {
属性1: 值1;
属性2: 值2;
}
/* 实际例子 */
.card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
}CSS还支持注释、继承和层叠机制。子元素会自动继承父元素的部分属性，如字体和颜色，这让全局样式设置变得简单；层叠机制则决定了多条规则冲突时的取舍规则。把这些概念串联起来，你就能完整回答“CSS元素包括哪些类型”这个问题：它既是选择器体系中的标签、类、ID、伪类、伪元素等匹配方式，也是HTML元素在页面中呈现的块级、行内、行内块等显示类型。动手写几个小案例练习一下，这些概念很快就能内化成实际技能。