不同伪元素共享CSS代码时的样式覆盖问题咨询

首先明确：CSS规范没有禁止不同伪元素共享代码，你的问题出在选择器合并时的样式逻辑错误上。

核心问题分析 #

你提到两个伪元素的代码除了选择器（.lft .logoname::before和.rgt .logoname::after）和位置属性（left/right）外完全一致。当你合并选择器时，大概率是把left和right也放到了同一个规则块里，或者只保留了其中一个位置属性，导致两个伪元素都应用了相同的位置规则。

举个错误写法的例子：

/* 错误：把互斥的位置属性放到共同规则中 */
.lft .logoname::before, .rgt .logoname::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url(icon.png);
  right: -40px; /* 两个伪元素都会应用这个right属性 */
}

这种情况下，.lft .logoname::before本应使用left定位到文字左侧，却被强制应用了right属性，最终跑到文字右侧，和.rgt .logoname::after重叠，看起来就只有末尾的图标。

正确写法 #

把共同样式抽出来合并，位置属性单独拆分到各自的规则中：

/* 共享的通用样式 */
.lft .logoname::before, .rgt .logoname::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url(icon.png);
  /* 其他共同样式：边框、对齐方式等 */
}

/* 单独定义每个伪元素的位置 */
.lft .logoname::before {
  left: -40px;
}

.rgt .logoname::after {
  right: -40px;
}

额外排查点 #

• 检查选择器优先级：有没有其他更高优先级的规则（比如带ID的选择器、内联样式）覆盖了你的伪元素样式？
• 确认HTML结构：.lft/.rgt确实是.logoname的祖父元素，选择器层级没有写错（比如是不是应该写成.lft > .parent > .logoname::before？）

内容的提问来源于stack exchange，提问作者MrCycling