Question

我不是设计师，所以这个问题可能听起来很愚蠢。

我可以从伪类覆盖color属性但不覆盖填充。

这是一个例子

HTML：

<p id="pid" class="pclass"></p>

的CSS：

.pclass
{
    color:red;
    padding-left: 20px;
}

#pid:before
{
    content:'test  ';
    color:green !important;
    padding-left: 0px !important;
}

Fiddle

Answer 1

使用它可以帮助你

#pid::before {
    left: -20px;
    position: relative;
}

Answer 2

<强>原因

您从伪类中应用的样式仅应用于content。不是实际的元素。您可能认为!important正在改变颜色，但事实并非如此。

因此，当您从伪类更改color时，内容的颜色即test会发生变化。 padding-left仅应用于test，而不应用于<p>元素。

Demo

检查段落并注意填充。

＆＃13;

.pclass {
  color: red;
  padding-left: 20px;
}
.pclass:before {
  content: 'test';
  color: green;
  padding-left: 10px;
}

＆＃13;

<p id="pid" class="pclass"></p>

＆＃13;

<强>解决方案

要解决此问题，您可以将元素的position设置为relative，并使用否定left。

Demo

＆＃13;

.pclass {
  color: red;
  padding-left: 20px;
}
.pclass:before {
  content: 'test';
  color: green;
  left: -20px;
  position: relative;
}

＆＃13;

<p id="pid" class="pclass"></p>

＆＃13;

Answer 3

您可以使用#pid选择器覆盖填充：ID的优先级高于类：

.pclass {
  color:red;
  padding-left: 20px;
}
#pid:before {
  content: 'test';
  color: green;
}
#pid {
  padding-left: 0;
}

如果您希望在:before添加的文字后保留边距，则可以添加

padding-right: 20px;

到#pid:before。

从Pseudo类重写css

3 个答案: