Heim > Artikel > Web-Frontend > Was ist der cssnot-Selektor? Detaillierte Erklärung des not()-Selektors
Was ist der cssnot-Selektor? Detaillierte Erklärung des not()-Selektors
- 云罗郡主Original
- 2018-11-19 10:27:415508Durchsuche
Der Inhalt dieses Artikels befasst sich mit dem CSS-Selektor. Ich hoffe, er wird Ihnen als Referenz dienen.
not()-Selektor
In CSS3 wird der :not()-Selektor hauptsächlich verwendet, um alle Elemente außer einem bestimmten Element auszuwählen. Dies ist ein sehr nützlicher Selektor.
Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :not()选择器</title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li:not(.first)
{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="first">php中文网</li>
<li>php中文网</li>
<li>php中文网</li>
<li>php中文网</li>
</ul>
</body>
</html>Der Effekt ist wie folgt:
Analyse:
Für „ul li:not (.first )“ betrachten wir diesen Selektor in zwei Schritten. Das „. first“ in den Klammern bedeutet, dass das Element mit dem Klassenwert first (d. h. das erste li-Element) ausgewählt wird, also „ul li:not ( .first)“ bedeutet, dass alle li-Elemente unter dem ul-Element ausgewählt werden, mit Ausnahme des ersten li-Elements.
Wenn es keinen :not()-Selektor gibt, wäre es für uns mit viel redundantem Code sehr mühsam, den oben genannten Effekt zu erzielen. Tatsächlich: Die Idee, den Not()-Selektor zu verwenden, ähnelt der Idee der Komplementmenge in der Mathematik. Der :not()-Selektor ist in der tatsächlichen Entwicklung sehr praktisch und flexibel.
Das Obige ist eine vollständige Einführung in den CSS3-Selektor. Die ausführliche Erklärung des not()-Selektors. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, lesen Sie bitte die chinesische PHP-Website.
Das obige ist der detaillierte Inhalt vonWas ist der cssnot-Selektor? Detaillierte Erklärung des not()-Selektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!