简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > Front-End-Fragen und Antworten > Hauptteil

Was ist der CSS-Selektor „+'?

青灯夜游
Freigeben： 2022-11-24 20:41:28
Original
2707 Leute haben es durchsucht

In CSS ist „+“ der Selektor für benachbarte Geschwisterelemente, mit dem Elemente unmittelbar nach einem anderen Element ausgewählt werden. Sie haben dasselbe übergeordnete Element, mit anderen Worten, die beiden Elemente E und F haben dasselbe übergeordnete Element Das F-Element befindet sich hinter und neben dem E-Element, sodass der Selektor für benachbarte Geschwisterelemente zum Auswählen des F-Elements verwendet werden kann. Die Syntax lautet „E + F“.

Was ist der CSS-Selektor „+'?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Angrenzender Geschwisterelementselektor (E + F)

Angrenzender Geschwisterelementselektor kann Elemente direkt nach einem anderen Element auswählen und sie haben dasselbe übergeordnete Element, mit anderen Worten, zwei EF-Elemente haben dasselbe übergeordnete Element und das F Das Element befindet sich hinter dem E-Element und grenzt an, sodass wir den Selektor für benachbarte Geschwisterelemente verwenden können, um das F-Element auszuwählen.

Hier gibt es zwei wichtige Informationen: (1) unmittelbar nach einem anderen Element; (2) beide haben das gleiche übergeordnete Element

Beispiel ①: 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        div+p{
            background-color: aqua;
        }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
      <div>
          <p>第零个段落</p>
          <div>
              <p>第一个段落</p>
          </div>
      </div>
      <p>第二个段落</p>
      <p>第三个段落</p>
      <p>第四个段落</p>
    </body>
</html>
Nach dem Login kopieren

div +p bedeutet, dass alle ersten

-Elemente nach dem

-Element ausgewählt sind
-Tag, nicht das Element nach dem Tag; Der „zweite Absatz“ ist der erste nach dem
-Tag übergeordnetes Element zu
. Wie unten gezeigt, ist der „zweite Absatz“ nicht ausgewählt, da der benachbarte Geschwisterselektor ein unmittelbar darauf folgendes Element auswählt. Das Element nach

div+p{} stellt den

dar. Element unmittelbar nach der Auswahl von

, aber das obige Code-Div-Tag wird unmittelbar nach dem -Tag ausgewählt, d. h. es wird das -Tag ausgewählt ;-Tag steht nicht direkt neben dem
-Tag, daher kann das

-Element nicht ausgewählt werden.

rreee

warum „Listenelement 2“ und „Listenelement 3“ beide ausgewählt wurden~~~

Analysieren Sie zunächst den Selektorstil: li+li{}, was wörtlich bedeutet, dass alle Elemente ausgewählt werden, die sich in

  • befinden nach dem Tag ;li> ausgewählt, weil es das
  • -Tag direkt neben dem ersten
  • ist. Das dritte
  • -Tag wird ebenfalls ausgewählt: Das Tag ist auch ein
  • -Tag, das auch die Bedingungen des CSS-Selektors li+li{} erfüllt: Das erste
  • -Tag ist genau auf den Stil der CSS-Auswahl zurückzuführen Der Container ist li+li{}, sodass das li-Tag im Code diese „Formel“ immer anwenden kann.

    (Lernvideo-Sharing:

    CSS-Video-Tutorial)

    Das obige ist der detaillierte Inhalt vonWas ist der CSS-Selektor „+'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    • Verwandte Etiketten：
    css 选择器
    Quelle：php.cn
    Vorheriger Artikel：So konvertieren Sie einen String in ein Array in Javascript Nächster Artikel：Es gibt mehrere Möglichkeiten, eine JQuery-Ready-Funktion zu schreiben
    Erklärung dieser Website
    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
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
    Aus 2024-04-16 10:10:18
    0
    0
    1335
    Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...
    Aus 2024-04-06 21:58:04
    0
    1
    800
    Ändern Sie Inline-CSS-Stile in Javafx dynamisch Ich versuche, das Hintergrundbild eines Bereichs zu ändern, wenn die Anwendung maximiert i...
    Aus 2024-04-06 20:57:16
    0
    1
    487
    Wie kann man schwebende Elemente in CSS vertikal statt horizontal stapeln lassen? Ich versuche, eine Webseite mit zwei Spalten zu erstellen, mit Hauptinhalt auf der einen S...
    Aus 2024-04-06 20:45:26
    0
    2
    386
    Gibt es eine Möglichkeit, die vertikale Zentrierung des Texts in der Flexbox zu erzwingen, unabhängig davon, welchen anderen CSS-Code wir haben? Ich habe den folgenden CSS-Code, der Teil eines größeren CSS-Codes ist, der in einer Websi...
    Aus 2024-04-06 20:41:51
    0
    1
    518
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！