Le pouvoir de: a () dans css

COMPLÈRES DE LES COMPRÉPENSIONNAIRES, Plongeons dans le monde passionnant de la pseudo-classe de CSS! Bien que relativement nouveau, :has() est rapidement devenu un favori parmi les développeurs frontaux pour sa capacité à contrôler précisément le style en fonction de la structure interne d'un élément. Explorons ses fonctionnalités et ses applications pratiques. :has()

compréhension :has()

Le

pseudo-classe ne styles élégamment un élément uniquement s'il contient des éléments enfants spécifiques. Considérez-le comme un style conditionnel: "Si cet élément contient :has() que , alors style cet élément ."

Syntaxe:

:has(<direct-selector>) {
  /* Styles applied if the direct selector is found within the parent */
}</direct-selector>

Résolution d'un défi de style commun

Auparavant, le style d'un élément parent basé uniquement sur la présence de ses enfants nécessitait JavaScript.

résout de manière élégante. :has()

Envisagez un article de blog répertoriant où un

(titre) pourrait être suivi par un <h1></h1> (sous-titre). Nous pourrions vouloir mettre en évidence visuellement le <h2></h2> uniquement si un <h1></h1> existe directement après. Avant <h2></h2>, cela a nécessité JavaScript. :has()

L'ancienne (javascript):

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Ce code JavaScript itère dans

des éléments, vérifie un suivant <h1></h1> et ajoute une classe de style. <h2></h2>

La nouvelle (CSS) Way:

h1:has(+ h2) {
  color: blue;
}

Ce CSS concis obtient le même résultat en utilisant

et le combinateur de frères adjacents (:has()). Il styles le bleu uniquement si un <h1></h1> le suit immédiatement. <h2></h2>

Exemples pratiques :has()

Explorons quelques scénarios où

brille. :has()

Exemple 1:

html:

<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>...</p>

<h1>This is a test</h1>
<p>...</p>

CSS:

h1:has(+ h2) {
  color: blue;
}

seul le premier

sera bleu car il est suivi d'un <h1></h1>. <h2></h2>

Exemple 2: styliser des images avec des légendes

Souvent, nous travaillons avec des images et des légendes.

peut améliorer la présentation de l'image. :has()

html:

<figure>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="The Power of :has() in CSS ">
  <figcaption>My Aunt Sally's Doggo</figcaption>
</figure>

CSS:

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Cela styles le

uniquement s'il contient un <figure></figure>. <figcaption></figcaption>

Soutien du navigateur et utilisation de la communauté

bénéficie d'un large support dans les navigateurs modernes (vérifiez Caniuse.com pour des informations détaillées sur la compatibilité des navigateurs). Les commentaires de la communauté révèlent des utilisations créatives, y compris les améliorations de l'accessibilité. :has()

Considérations importantes:

• Spécificité: :has() hérite de la spécificité de son sélecteur interne le plus spécifique.
• Compatibilité du navigateur: échec de :has() va cascade à moins d'être utilisé dans des sélecteurs pardonnants comme :is() ou :where().
• nidification: :has() ne peut pas être imbriqué dans un autre :has().
• pseudo-éléments: les pseudo-éléments ne sont pas des sélecteurs valides dans :has().

Conclusion:

:has() est un ajout puissant à l'arsenal CSS, permettant un style élégant et efficace qui dépendait auparavant de JavaScript. En comprenant ses capacités et ses limites, nous pouvons élever nos compétences en développement Web et créer un code plus robuste et maintenable.

Lire plus approfondie:

• Article d'Isha Deed sur: Has ()
• CSS-Tricks sur: a ()
• Article de blog Chrome sur: Has ()
• CSS-Tricks sur le sélecteur: a () Sélecteur

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!