Wie überschreiben Stile mit denen: root

-1

Ich möchte Stile überschreiben, die mit :root Pseudo-Klasse definiert.Wie überschreiben Stile mit denen: root

Ich habe wie unten CSS: statt rot

<!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>

Ich möchte grüne Farbe angezeigt werden soll. Wie kann ich überschreiben die Stile

Quelle

2017-01-31 sankar.suda

Gleiche wie bei jedem anderen, gibt es nichts Besonderes an dem ': root' Pseudo-Klasse in dieser Hinsicht. Aber Ihr zweiter Selektor passt zu nichts, weil das 'html' Element keine' div' _children_ hat. – CBroe

html > div > p wählt nicht Ihr Element, weil es ein body Element zwischen den html und den div ist.

html > body > div > p wählt Ihr Element, aber die Spezifität ist niedriger als :root p, die eine Pseudo-Klasse hat.

Der Trick ist einfach: zwei Pseudo-Klassen sind spezifischer als einer. Verwenden :root:root p

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

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

Quelle

2017-01-31 13:08:34 Oriol

Verwendung div> p statt html> div> p

 div > p { 
      color: green!important; 
     }

JSFIDDLE

Quelle

2017-01-31 13:04:00 Karuppiah

dazu Versuchen:

:root p{ 
 
      color: red !important; 
 
     } 
 

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

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

Quelle

2017-01-31 13:05:45

Wie überschreiben Stile mit denen: root

Antwort

Verwandte Themen