在卡片类组件的开发过程中，标题和内容样式混淆是常见的问题，比如标题和正文都应用了相同的字体、颜色或者边距，导致视觉层级模糊，用户无法快速区分内容的主次关系。这类问题大多是由于样式选择器的作用范围没有精准控制，导致样式被错误继承或传递到不需要的元素上。此时使用CSS子代选择器可以精准定位目标元素，拆分结构样式，解决混淆问题。
问题场景还原
我们先看一个典型的卡片结构，很多开发者会写出类似下面的HTML代码：
<div class="card">
<div class="card-header">
<h3 class="card-title">卡片标题</h3>
</div>
<div class="card-body">
<p class="card-content">这里是卡片的正文内容，用来展示卡片的核心信息，需要和用户快速识别的标题形成明显的视觉差异。</p>
<p class="card-content">这是第二段正文内容，和标题的样式需要完全区分开。</p>
</div>
</div>
如果直接使用类选择器设置样式，很容易出现下面的问题代码：
/* 错误的样式写法，作用范围过大 */
.card h3, .card p {
font-size: 16px;
color: #333;
margin-bottom: 10px;
}
这样写之后，标题和所有段落的字体大小、颜色、边距都完全一致，用户无法快速区分标题和正文，这就是典型的样式混淆问题。
子代选择器的核心作用
CSS子代选择器的语法是父元素 > 子元素，它只会选择作为指定父元素直接子元素的元素，不会选择更深层级的后代元素，也不会影响其他层级的同类元素。这个特性刚好可以解决卡片内部样式混淆的问题，我们可以精准控制每个层级的样式，避免样式互相干扰。
用子代选择器拆分结构的步骤
1. 明确卡片的层级结构
首先梳理卡片的嵌套关系，确定每个元素的直接父级：
- card是根容器，直接子元素是card-header和card-body
- card-header的直接子元素是card-title
- card-body的直接子元素是card-content
2. 用子代选择器编写精准样式
根据层级关系，使用子代选择器分别设置标题和内容的样式：
/* 卡片根容器基础样式 */
.card {
width: 300px;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 标题区域样式，只作用于card的直接子元素card-header */
.card > .card-header {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
/* 标题样式，只作用于card-header的直接子元素card-title */
.card > .card-header > .card-title {
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin: 0;
}
/* 内容区域样式，只作用于card的直接子元素card-body */
.card > .card-body {
line-height: 1.6;
}
/* 内容段落样式，只作用于card-body的直接子元素card-content */
.card > .card-body > .card-content {
font-size: 14px;
color: #666;
margin-bottom: 12px;
}
/* 最后一个内容段落去掉底部边距 */
.card > .card-body > .card-content:last-child {
margin-bottom: 0;
}
3. 验证效果
应用上述样式后，标题会显示为20px加粗的深黑色，内容区域是14px的浅灰色，标题下方还有分割线，视觉层级非常清晰，不会出现样式混淆的问题。即使后续在card-header或者card-body内部新增其他元素，只要不是直接子元素，都不会被上述样式影响。
注意事项
- 子代选择器只会匹配直接子元素，如果需要匹配所有后代元素，应该使用后代选择器（空格分隔），不要混淆两者的使用场景
- 如果卡片结构存在多层嵌套，需要逐层使用子代选择器，避免样式作用到非目标元素
- 结合类名使用时，子代选择器的优先级比单一类选择器更高，不需要额外添加冗余的优先级权重
对比效果总结
我们可以通过下面的表格直观看到两种写法的差异：
| 写法类型 | 作用范围 | 是否会出现样式混淆 |
|---|---|---|
| 普通类选择器 | 所有匹配类的元素 | 是，标题和内容样式容易统一 |
| 子代选择器 | 指定父元素的直接子元素 | 否，样式精准控制，层级清晰 |
通过子代选择器拆分卡片的结构样式，不仅能够解决标题和内容混淆的问题，还能让后续的样式维护更方便，修改某一层级的样式时不会影响其他层级的内容。