Question

我想覆盖用:root伪类定义的样式。

我有下面的css：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div><p>hello world</p></div>

    <style type="text/css" media="screen">
        :root p{
          color: red !important;
        }
        html > div > p{
          color: green !important;
        }
    </style>    
</body>
</html>

我想显示绿色而不是红色。我该如何覆盖样式

Answer 1

尝试这个：

:root p{
          color: red !important;
        }

:root div > p{
      color: green !important;
}

<div><p>hello world</p></div>

Answer 2

使用 div＆gt; p 而不是 html＆gt; div> P

div > p { color: green!important; }

<强> JSFIDDLE

Answer 3

html > div > p未选择您的元素，因为body和html之间存在div元素。

html > body > div > p确实选择了您的元素，但特异性低于:root p，它具有伪类。

技巧很简单：两个伪类比一个更具体。使用:root:root p

:root p {
  color: red;
}
:root:root p {
  color: green;
}

<div><p>hello world</p></div>

如何覆盖具有：root的样式

3 个答案: