给子元素写样式却不生效，往往不是选择器本身写错了，而是浏览器在计算优先级时选择了另一条规则。CSS中的特异性（Specificity）决定了一条规则在冲突时能否胜出，理解它才能精准定位子元素样式。下面从最基础的子元素选择器开始，逐步展开特异性计算和现代选择器的应用。
直接子元素选择器与后代选择器
在CSS中，后代选择器和直接子元素选择器是定位子元素最常用的两种方式。后代选择器使用空格分隔，它会匹配指定父元素下所有层级的后代元素，无论嵌套多深。直接子元素选择器使用大于号（>）分隔，只匹配紧邻父元素的直接子级，不会影响更深层的嵌套元素。这个区别在列表、菜单、卡片等嵌套结构中非常关键。
以下面这段HTML结构为例：
<ul class="menu">
<li>直接子项</li>
<li>
<ul class="submenu">
<li>嵌套子项</li>
</ul>
</li>
</ul>
如果希望只让外层菜单的li变成红色，而嵌套子菜单保持默认颜色，就必须使用直接子元素选择器。对应的CSS如下：
/* 后代选择器：匹配所有层级的li */
ul.menu li {
color: blue;
}
/* 直接子元素选择器：只匹配ul.menu的直接li */
ul.menu > li {
color: red;
}
直接子元素选择器可以有效避免样式穿透到嵌套组件中，尤其适合组件化开发。例如在编写导航栏时，只希望一级菜单项有特定背景色，而二级菜单保持独立样式，此时使用>比单纯的后代选择器更安全。需要注意的是，直接子元素选择器对性能也有轻微帮助，因为浏览器在匹配时会提前终止深层遍历。
特异性计算规则与常见误区
特异性决定了当多条规则同时指向同一个元素时，哪一条会被浏览器采纳。它由四个部分组成，从高到低依次是：行内样式、ID选择器、类选择器/属性选择器/伪类、类型选择器/伪元素。通常将这四个部分记录为四元组（a, b, c, d），分别对应行内样式数、ID数、类/属性/伪类数、类型/伪元素数。比较时从左到右逐级比较，同级相等再比较下一级，完全相等时后定义的规则生效。
来看一个具体的计算示例：
/* 特异性为 0,0,2,2：两个类 + 两个类型 */
.nav ul li.active {
color: green;
}
/* 特异性为 0,0,3,1：三个类 + 一个类型 */
.nav .menu li.item {
color: orange;
}
第二条规则虽然类型选择器更少，但类选择器数量多一个，因此特异性更高，最终文字颜色会显示为橙色。很多开发者误以为选择器越长特异性就越高，或者认为写在后面的样式一定覆盖前面的样式，其实只要特异性更高，即使规则出现在文件更早位置也会胜出。
行内样式的优先级高于任何选择器，而!important会直接打破常规计算，除非必要否则应尽量避免使用。ID选择器的特异性也非常高，过度使用ID会造成样式难以被覆盖，所以现代前端实践通常建议使用类选择器来构建可维护的样式体系。
现代CSS选择器与精准控制
CSS近年来新增了一些强大的伪类，能帮助开发者更精准地定位子元素，同时更灵活地管理特异性。:is()和:where()都可以接受选择器列表，不同点在于:is()的特异性等于参数中最高特异性的选择器，而:where()的特异性始终为0。这个特性让:where()非常适合编写基础样式或重置样式，不会意外抬高优先级。
/* :where() 特异性为0，可以作为低优先级基础样式 */
:where(.theme-dark) .card {
background: #1e1e1e;
}
/* 普通类选择器特异性更高，可以覆盖上面的基础样式 */
.theme-dark .card {
background: #111;
}
另一个极其有用的伪类是:has()，常被称为“父级选择器”。它可以根据子元素的匹配状态来选中父元素，真正实现了自下而上的样式控制。例如，当列表项包含直接的按钮子元素时，给该列表项增加内边距：
/* 选择包含直接子元素button的li */
li:has(> button) {
padding: 8px;
}
/* 选择包含有.disabled类的子元素的卡片 */
.card:has(.disabled) {
opacity: 0.6;
}
:has()在表单验证、空状态判断、交互反馈等场景中非常实用。不过使用前需要确认目标浏览器支持情况，现代主流浏览器已经逐步支持该特性。结合:is()和:where()，可以在复杂组件中实现既精准又易于维护的样式规则。
实战策略与特异性冲突规避
在实际项目中，样式互相覆盖通常源于特异性失控。要避免这种问题，可以遵循几条策略。首先是保持选择器扁平化，尽量使用单一类选择器而不是多层嵌套的类型选择器。BEM命名规范就是一个很好的实践，它通过类名本身来传达结构和状态，避免依赖高特异性。其次，对于全局主题或基础样式，可以使用:where()将特异性归零，方便在组件层覆盖。
/* BEM风格：类名扁平，特异性一致 */
.card { padding: 16px; }
.card--compact { padding: 8px; }
.card__title { font-size: 18px; }
.card__title--muted { color: #666; }
当需要按层管理样式优先级时，CSS的@layer规则也是个有效工具。它允许将不同来源的样式划分为不同层，后声明的层优先级更高，且层级的优先级会先于特异性进行比较。这意味着即使基础层里写成高特异性规则，组件层仍然可以覆盖它。
@layer base, components, utilities;
/* base层特异性再高也不会覆盖components层 */
@layer base {
.content div p {
color: #333;
}
}
@layer components {
.card p {
color: #111;
}
}
调试特异性时，浏览器开发者工具是最直观的工具。在Elements面板中选中元素，右侧Styles栏会列出所有匹配的规则，被覆盖的规则通常会以删除线显示。将鼠标悬停在选择器上，可以看到具体的特异性数值。这能帮助开发者快速定位是哪一条规则抢占了样式，从而决定是修改选择器还是调整特异性策略。
掌握子元素选择器的差异、特异性计算规则以及现代伪类的使用，就能在编写CSS时做到有的放矢。精准定位子元素样式不再需要频繁使用!important，而是通过合理的结构、扁平的选择器和可控的特异性来维持样式系统的稳定。