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:415455Durchsuche

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:

Was ist der cssnot-Selektor? Detaillierte Erklärung des not()-Selektors

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!

php css3 class 选择器 ul li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist der Root-Selektor? Detaillierte Erklärung des Root-SelektorsNächster Artikel：Was ist der Root-Selektor? Detaillierte Erklärung des Root-Selektors

In Verbindung stehende Artikel

Mehr sehen