Implémenter divers scénarios d'application du sélecteur de pseudo-classe CSS :target

Pour implémenter divers scénarios d'application du sélecteur de pseudo-classe CSS :cible, des exemples de code spécifiques sont nécessaires

CSS :le sélecteur de pseudo-classe cible est un sélecteur CSS couramment utilisé, qui peut être basé sur le point d'ancrage (# dans l'URL) ) pour sélectionner des éléments spécifiques. Dans cet article, nous présenterons quelques scénarios d'application pratiques d'utilisation de ce sélecteur de pseudo-classe et fournirons des exemples de code correspondants.

1. Changement de style de lien de navigation dans la page :

Lorsque l'utilisateur clique sur le lien de navigation dans la page, vous pouvez utiliser le sélecteur de pseudo-classe :target pour ajouter un style au lien de navigation actuellement cliqué afin de mettre en évidence celui de l'utilisateur. emplacement. Voici un exemple de code :

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. Effet modal :

En utilisant le sélecteur de pseudo-classe :target et les effets de transition CSS3, vous pouvez obtenir un effet modal simple. Voici un exemple de code :

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. Faites défiler la page jusqu'à la section spécifiée

En utilisant le sélecteur de pseudo-classe :target et l'effet d'animation de défilement, vous pouvez obtenir un défilement fluide jusqu'à page en cliquant sur le lien de navigation Spécifiez la section. Voici un exemple de code :

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; /* 调整目标节的位置，以免内容被导航遮挡 */
}

En utilisant le sélecteur de pseudo-classe :target, nous pouvons obtenir une variété d'effets pratiques, tels que le changement de style de lien de navigation, les effets de boîte modale, la fluidité défilement, etc. Ces scénarios ne sont que quelques-unes des nombreuses applications que vous pouvez étendre en fonction de vos besoins réels et les utiliser de manière plus créative. J'espère que cet article vous sera utile pour votre étude et votre pratique !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!