我想覆盖用: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>我想显示绿色而不是红色。我怎样才能覆盖样式
html > div > p不会选择您的元素，因为和 之间有一个body元素。htmldiv
html > body > div > p确实选择了您的元素，但特异性低于:root p，它具有伪类。
技巧很简单：两个伪类比一个伪类更具体。使用:root:root p
:root p {
color: red;
}
:root:root p {
color: green;
}<div><p>hello world</p></div>