html - CSS在声明后更改字体样式，与之前选择器的关系

Question

我有一些跨度元素，我在其中使用了 before 伪选择器。工作正常。我的问题是我的内容:before需要有不同的字体样式，例如没有文本装饰等。在我的 span 元素上声明它后不能覆盖它。

#MyElement span
{
  text-decoration: underline;
}

#MyElement span + span:before
{
  content: "|";
  text-decoration: none;
}

http://jsfiddle.net/dyJXw/

Answer 1

该text-decoration属性不是继承的，但它的行为方式有点像“强制继承”：“当在内联元素上指定或传播到内联元素时，它会影响该元素生成的所有框”。所以即使:before伪元素没有text-decoration或者已经text-decoration: none设置了，生成的内容也会受到text-decoration父元素（真实span元素）的影响。

但是，规范补充说：“请注意，文本装饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代的内容，例如内联块和内联表。” 因此，您可以通过将第二条规则更改为以下内容来消除生成内容的下划线：

#MyElement span + span:before
{
  content: "|";
  display: inline-block;
}

Answer 2

一种技巧是制作伪元素position:absolute，使其不随其父内容流动并继承其属性。

演示

来自示例：-

#MyElement span {
    text-decoration: underline;
    position:relative;
    margin-left:5px;
}
#MyElement span + span:before {
    content:'|';
    left:-5px;
    position:absolute;
}