Question

我使用了前伪选择器的一些span元素。工作良好。我的问题是我的: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的影响（真实{ {1}}元素）。

但是，规范补充说：“请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代（如内联块和内联表）的内容。”所以你摆脱了下划线通过将第二个规则更改为此内容来生成内容：

span

Answer 2

一个hack是伪元素的position:absolute，因此它不会与其父内容一起流动并继承其属性。

Demo

来自示例： -

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

CSS声明后改变字体样式，与选择器前的关系

2 个答案:

Demo