在日常网页开发中，如何在不借助伪元素的情况下，为“目标元素”打造独特的视觉效果，是前端工程师经常遇到的挑战。本文从五大方向展开，提供完整方法与实战技巧，帮助你在实际项目中快速落地。
1. 直接定位目标元素的基本方法
1.1 使用ID实现精确定位
ID 的全局唯一性决定了通过 #id 选择器来直接定位目标元素时的高特异性。对于需要在大规模页面中唯一改变样式的组件，这是最直接、最稳妥的办法。
将目标元素的 id 设置为独一无二的识别符，然后在样式表中通过 #target-id 来定义样式。这种方式在复杂布局中能避免冲突，且易于维护。
/ 某个目标元素的高优先级定位
#target { background: #ffd700; border: 2px solid #b8860b; padding: 8px; }
1.2 使用类名和组合提升定位稳定性
类名的可复用性让你在多个元素之间复用同样的样式，同时通过组合选择器提高定位的上下文稳定性。
在结构中给目标元素添加明确的类名，并结合父级容器或其他类进行组合定位，既能确保样式落在正确的元素上，又便于重用。
/ 通过组合选择器定位目标元素
.container .target { color: #333; }
.container > .target.highlight { background: #eef; }
1.3 使用数据属性实现条件定位
数据属性是一种自描述的定位方式，可在运行时根据状态改变数据属性值来驱动样式，而无需改变类名结构。
通过 data- 属性来标记目标，在 CSS 中使用属性选择器进行样式绑定，便于与脚本协作实现动态样式切换。
/ 基于 data-target 的条件样式
[data-target="logo"] { border-radius: 6px; border: 1px solid #1e90ff; }
[data-target="logo"][data-active="true"] { box-shadow: 0 0 0 4px rgba(30,144,255,.25); }
1.4 使用结构化定位的混合方案
综合使用唯一标识、类名与数据属性，可以在保持语义与可维护性的同时，提升目标定位的鲁棒性，减少因 DOM 重排带来的样式波动。
示例场景：在一个可重复的卡片组件内，目标卡片使用 data-target、class 与父容器结构共同约束，确保样式应用的可预测性。
/ 混合定位示例
.card[data-target="promo"].highlight { border-left: 4px solid #ff5722; background: #fff8e1; }
2. 状态与交互驱动的样式：通过伪类实现目标样式（注意：不涉及伪元素）
2.1 :target 将当前锚点目标元素高亮
:target 能直接对 URL 锚点对应的元素生效，在单页应用或滚动定位场景中非常有用。通过 CSS 可以对被锚定的元素进行高亮、放大或边框强调。
利用 HTML 锚点链接触发目标样式变更，直接给带有对应 id 的元素添加样式。
/ 当 URL 的哈希指向目标元素时应用样式
:target { outline: 3px solid #00c2ff; background: rgba(0,194,255,.08); }
2.2 :focus-within 提升容器内目标元素的可见性
focus-within 可以在子元素获得焦点时，整个父容器触发样式，这在表单区域或导航菜单中尤为常用，能无缝引导用户注意当前焦点区域。
通过为导航容器或表单组设置样式，当其中任一控件获得焦点时，容器背景、边框或阴影变化，从而实现整体强调。
/ 容器内任一子元素获得焦点时应用样式
.nav:focus-within { background: #f0f8ff; border-color: #1e90ff; }
2.3 :hover 与 :focus 的组合样式
交互驱动的视觉反馈可以通过 :hover、:focus 的组合来实现。对于可点击的元素，鼠标悬停与键盘聚焦时的视觉状态应保持一致。
将悬停和聚焦样式合并，可以确保无论用户使用鼠标还是键盘，都能获得一致的目标样式。
/ 鼠标悬停与键盘聚焦的一致样式
.button:hover, .button:focus { background: #1e90ff; color: #fff; outline: none; }
2.4 :nth-child 与 :nth-of-type 提供结构化定位
基于结构位置的选择器提供对同类元素序列的控制，当你需要在同一组元素中突出某个目标时，nth-child/nth-of-type 是高效工具。
通过序号定位特定位置的元素，并对其应用特殊样式，避免为每个元素添加额外类名。
/ 针对列表中的第三项单独样式
ul.items > li:nth-child(3) { font-weight: bold; color: #d32f2f; }
3. 结构化选择器的进阶应用：:is()、:where()、>、+、~ 等组合
3.1 使用 :is() 集中覆盖多个目标元素
:is() 可以把多组选择器压缩成一个统一的规则，在需要对不同但本质相同的目标应用同样样式时，能显著减少重复编写的样式代码。
这是提升可维护性与可读性的利器，尤其在复杂组件库中尤为有用。
/ 将多个目标合并到一个样式
:is(#id1, .classA, section .item) { border: 1px solid #ccc; padding: 8px; }
3.2 使用 :where() 简化权重与继承
:where() 的权重始终为 0，它可以用于创建低优先级的覆盖规则，便于在全局样式和局部样式之间进行灵活组合，避免意外的特异性冲突。
在需要快速覆盖但不希望提升权重时，:where() 是理想选择。
/ 低权重覆盖
:where(.card, .panel):hover { transform: scale(1.01); }
3.3 通过父子结构实现环境感知的定位
组合上下文结构的选择器能实现环境感知样式，即同一个目标在不同父元素下有不同外观，这对于组件化设计尤为重要。
通过父级类名、后代关系及其他选择器组合，确保目标在特定上下文中呈现独特样式。
/ 环境感知的目标样式
.card[data-mode="compact"] .target { padding: 6px; font-size: 14px; }
.card[data-mode="expanded"] .target { padding: 12px; font-size: 16px; }
4. 变量和主题化：用 CSS 自带的变量实现同一目标的多态样式
4.1 使用 CSS 变量定义基准样式
CSS 变量提供可重复使用的可定制参数，通过在 :root 声明全局变量，再在目标元素上引用，轻松实现主题化和可维护的样式切换。
变量的好处在于统一控制点，便于跨组件一致性与快速迭代。
/ 全局变量定义与引用
:root { --target-bg: #ffffff; --target-border: #dcdcdc; }
.target { background: var(--target-bg); border: 1px solid var(--target-border); }
4.2 通过父级类切换主题
父级类的切换可以实现主题的无缝切换，不需要逐个修改子元素的样式，提升可维护性与可扩展性。
通过在父容器上切换类名，子元素的变量引用和样式也随之改变，达到快速主题切换的效果。
/ 根据父级主题切换目标样式
.light-theme { --target-bg: #fff; --target-text: #333; }
.dark-theme { --target-bg: #1a1a1a; --target-text: #eee; }
.target { background: var(--target-bg); color: var(--target-text); }
5. 视觉强化与动画：在不使用伪元素的前提下的增强手段
5.1 使用 box-shadow、outline、边框实现高亮
高亮效果不一定需要伪元素，直接通过阴影、轮廓和边框颜色的变化即可实现显著的目标指示。
结合过渡效果，可以让状态切换更加平滑，提升用户体验。
/ 高亮过渡效果
.target { transition: box-shadow .25s ease, border-color .25s ease; }
.target.active { box-shadow: 0 0 0 4px rgba(0, 0, 0, .08); border-color: #1e90ff; }
5.2 使用 clip-path、mask 实现特殊形状边界
除了伪元素，clip-path 与 mask 可以改变目标元素的可见区域，从而实现独特的形状与裁剪效果，适用于卡片、按钮等控件的个性化外观。
通过 clip-path 指定多边形路径或圆形路径，即可得到非矩形的目标边界。
/ 使用 clip-path 给目标添加非矩形裁剪
.target { clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); background: #4caf50; color: white; }
以上方法共同构成了一套完整的“除了伪元素”实现目标元素特殊样式的实战体系。通过灵活运用定位、状态伪类、结构化选择、变量与主题化，以及视觉强化手段，你可以在不依赖 ::before/::after 的前提下，快速实现对目标元素的精准控制与美观呈现。
