Implementieren Sie verschiedene Anwendungsszenarien des Pseudoklassenselektors CSS:target

Um verschiedene Anwendungsszenarien von CSS :target pseudo-class selector zu implementieren, sind spezifische Codebeispiele erforderlich

CSS :target pseudo-class selector ist ein häufig verwendeter CSS-Selektor, der auf dem Ankerpunkt (# in) basieren kann die URL) ), um bestimmte Elemente auszuwählen. In diesem Artikel stellen wir einige praktische Anwendungsszenarien für die Verwendung dieses Pseudoklassenselektors vor und stellen entsprechende Codebeispiele bereit.

1. Wechsel des Stils des In-Page-Navigationslinks:

Wenn der Benutzer auf den Navigationslink auf der Seite klickt, können Sie den :target-Pseudoklassenselektor verwenden, um dem aktuell angeklickten Navigationslink einen Stil hinzuzufügen, um den des Benutzers hervorzuheben Standort. Hier ist ein Beispielcode:

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

CSS:

.navigation a:target {
  font-weight: bold;
  color: red;
}

2. Modaleffekt:

Durch die Verwendung des :target-Pseudoklassenselektors und CSS3-Übergangseffekten können Sie einen einfachen modalen Effekt erzielen. Das Folgende ist ein Beispielcode:

HTML:

<div class="modal" id="modal">
  <div class="modal-content">
    <h2>Title</h2>
    <p>Modal Content</p>
    <a href="#!" class="close-button">Close</a>
  </div>
</div>
<a href="#modal">Open Modal</a>

CSS:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal:target {
  display: block;
}

.modal-content {
  background-color: white;
  width: 300px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-button {
  text-align: center;
  display: block;
  margin-top: 20px;
}

3. Scrollen Sie die Seite zum angegebenen Abschnitt

Mit dem :target-Pseudoklassenselektor und dem Bildlaufanimationseffekt können Sie einen reibungslosen Bildlauf zum angegebenen Abschnitt erreichen Seite beim Klicken auf den Navigationslink Geben Sie den Abschnitt an. Das Folgende ist ein Beispielcode:

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

CSS:

html,body {
  scroll-behavior: smooth;
}

#section1:target,
#section2:target,
#section3:target {
  padding-top: 100px; /* 调整目标节的位置，以免内容被导航遮挡 */
}

Durch die Verwendung des :target-Pseudoklassenselektors können wir eine Vielzahl praktischer Effekte erzielen, z. B. das Umschalten des Navigationslinkstils, modale Boxeffekte und Glättung Scrollen usw. . Diese Szenarien sind nur einige der vielen Einsatzmöglichkeiten, die Sie entsprechend Ihren tatsächlichen Bedürfnissen erweitern und kreativer nutzen können. Ich hoffe, dass dieser Artikel für Ihr Studium und Ihre Praxis hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonImplementieren Sie verschiedene Anwendungsszenarien des Pseudoklassenselektors CSS:target. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!