元素选择器是CSS中最基础的定位方式，直接使用标签名作为样式入口。比如写一条 header { ... } 规则，就能覆盖页面中所有 <header> 元素。在网页布局里，这类选择器常用于两类场景：一是重置浏览器默认样式，二是搭建页面的语义化骨架。由于元素选择器作用域很宽，写得合适能大幅减少重复代码，写得不合适则容易让局部模块互相干扰。下面从基础语法展开，说明它在实际布局中的具体应用和避坑要点。
元素选择器的基础语法与布局初始化
类型选择器直接使用HTML标签名，例如 <section>、<article>、<main>。在样式表中可以单独使用，也可以用逗号并列多个标签，一次性为结构元素设置相同的盒模型规则。很多布局问题正是源于浏览器给不同标签设了不同默认 margin、padding 和 display 值，因此项目开始阶段通常会用元素选择器做归一化处理。
以下代码展示了如何用元素选择器清理页面的常见默认样式，并让语义化容器统一以块级元素参与布局：
/* 重置页面基础间距与高度 */
html, body {
margin: 0;
padding: 0;
height: 100%;
}
header, main, footer {
display: block;
box-sizing: border-box;
}
这里没有把每一处外边距都写成工具类，而是利用元素选择器一次性作用到所有对应标签上。对于内容型站点，这种写法能快速建立一致的布局基线。需要留意的是，元素选择器会波及页面中所有同名标签，包括未来引入的第三方组件或弹窗里的标签。因此全局初始化应尽量只涉及盒模型和显示类型，不要在其中写具体的宽度、浮动或定位，以免扩大影响面。
如果页面使用了 HTML5 语义标签，在旧版本浏览器中需要确保这些标签被识别为块级元素。除了引入 shim 脚本，也可以像上面那样用元素选择器显式声明 display: block;。不过如今主流浏览器对语义标签的支持已经非常完善，这一步更多被 normalize.css 等方案取代。无论如何，理解元素选择器的全局特性，能帮助开发者判断哪些样式适合放在全局层，哪些应该下放到组件层。
布局中元素选择器与类选择器的组合策略
仅靠元素选择器很难完成复杂布局。页面通常由多个相同标签组成，例如一篇文章里可能出现多个 <article>，如果直接写 article { float: left; width: 33%; }，会让页面里所有 <article> 都变成三列卡片，包括侧边栏里的相关内容。更稳妥的做法是先用类选择器圈定布局容器，再在容器内部结合元素选择器定义子项的排列规则。
下面的示例使用一个类选择器加元素选择器，构建三列卡片栅格：
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card-grid article {
padding: 20px;
border: 1px solid #d8d8d8;
border-radius: 6px;
background-color: #fff;
}
这里 .card-grid article 是一个后代选择器，前半部分用类限制范围，后半部分用元素选择器匹配直接出现或嵌套出现的 <article>。相比给每个 <article> 都加上 card 类，这种写法减少了一部分类名维护成本。但它的代价是特异性为 0-1-1，比单独的类型选择器更高，后续若想覆盖卡片样式，需要使用相同或更高特异性，否则样式容易被顶掉。
在实际项目中，如果某些 <article> 需要不同样式，例如首篇置顶或广告位，建议直接为这些特殊项添加额外的类，而不是继续堆叠元素选择器。例如 .card-grid .featured 或 .card-grid article.featured。这样可以保持规则可读，也避免通过 !important 强行压制。元素选择器在这个阶段承担的是结构化默认样式，类选择器负责差异和状态，两者分工明确。
特异性、性能与可维护性考量
浏览器解析 CSS 选择器时通常从右向左匹配。对于 .card-grid article，浏览器会先找到所有 <article>，再逐一向上判断祖先中是否有 .card-grid。如果页面中 <article> 数量不多，性能影响可以忽略；但如果选择器写成 body .content .widget ul li a 这类深层结构，就会让浏览器在每次样式重算时遍历大量节点。元素选择器在越靠右边的位置，匹配范围就越宽，过于宽泛的后代元素选择器可能拉低样式计算效率。
从可维护性角度看，布局样式应尽量扁平化。元素选择器适合定义基础标签的默认外观，但它不适合承载交互状态和业务模块的差异。一个常见的误区是，当页面中某个 <div> 出现边距问题时，反复用 div { margin: 0 } 去压制。这样的规则会污染所有 <div>，并且随着页面复杂度上升不断需要新的覆盖规则。更合理的方式是引入 reset 或 normalize 在项目入口完成全局清理，之后布局模块一律以类名为准。
如果确实需要在某个局部统一调整元素样式，可以借助 :where() 伪类来降低特异性。比如 :where(.card-grid) article 的特异性只相当于一个元素选择器，后面的元素样式更容易被其它类覆盖。但要注意浏览器兼容范围。对于大多数布局场景，既不推荐完全不用元素选择器，也不推荐在所有地方都依赖高特异性的类来堆样式，平衡才是关键。
在响应式断点中，元素选择器同样可以发挥作用。例如移动端让 <section> 上下堆叠，桌面端再通过类控制栅格。不过断点内的规则往往需要精确到具体模块，因此建议以类选择器为主，元素选择器只做语义兜底。这样既能保证小屏布局快速成形，又不会给后续调整造成阻碍。