Sélections relationnelles et d'attribut dans CSS3

Ce qui suit est extrait du livre "HTML5 & CSS3 pour le monde réel, 2e édition" co-écrit par Alexis Goldstein, Louis Lazaris et Estelle Weyl. Ce livre est disponible dans les magasins du monde entier, et vous pouvez également acheter la version E-Book ici.

Points de base

• Le sélecteur CSS3 permet un positionnement précis des éléments sur une page Web, étendant les capacités des versions CSS précédentes. Les sélecteurs relationnels et les sélecteurs d'attribut sont des caractéristiques clés de CSS3.
• Relations Selector localise des éléments en fonction de leurs relations dans la balise. Il s'agit notamment des combineurs descendants (E F), des sous-combinants (E & GT; F), des sélecteurs de frère adjacents ou des sélecteurs de frères suivants (E F) et des sélecteurs de frère universel ou des sélecteurs de frères et sœurs ultérieurs (E ~ F).
• Le sélecteur d'attributs dans CSS3 permet la correspondance basée sur les attributs de l'élément, et CSS3 étend le sélecteur d'attribut de CSS2 en permettant l'appariement des motifs. Ceux-ci incluent E [att], E [att = Val], E [attr | = val], e [attr ~ = val], e [att ^ = val], e [att $ = val] et e [att * = Val].
• Tous les navigateurs modernes prennent en charge les sélecteurs CSS3, y compris IE9 et plus tard. L'utilisation de ces sélecteurs peut considérablement améliorer l'efficacité et l'efficacité de la conception et du développement Web.

Sélecteur CSS3

Le sélecteur CSS est le cœur de CSS. S'il n'y a pas de sélecteur pour localiser les éléments sur la page, la seule façon de modifier l'attribut CSS de l'élément est d'utiliser l'attribut de style de l'élément et de déclarer le style en ligne, qui est à la fois maladroit et difficile à entretenir. Nous utilisons donc le sélecteur. Initialement, CSS permet des éléments correspondants par type, classe et / ou ID. Cela nécessite d'ajouter des attributs de classe et d'ID à nos balises pour créer des crochets et distinguer les éléments du même type. CSS2.1 ajoute des pseudo-éléments, des pseudo-classes et des combinateurs. Avec CSS3, nous pouvons utiliser divers sélecteurs pour localiser presque tous les éléments de la page.

Dans la description ci-dessous, nous inclurons les sélecteurs qui nous sont fournis dans les versions CSS précédentes. Ils sont inclus car bien que nous puissions utiliser des sélecteurs CSS3, les sélecteurs plus tôt que CSS3 font également partie de la spécification de niveau 3 du sélecteur CSS et sont toujours pris en charge parce que le niveau 3 du Sélecteur CSS les étend. Même pour les sélecteurs qui existent depuis un certain temps, cela vaut la peine d'être examiné ici, car il y a des joyaux cachés peu connus dans l'ancienne spécification. Veuillez noter que tous les navigateurs modernes, y compris IE9 et plus tard, prennent en charge tous les sélecteurs CSS3.

Sélecteur de relations

Relations Selector localise des éléments en fonction de leurs relations dans la balise. Tout cela est pris en charge en commençant par IE7 et dans tous les autres navigateurs importants:

combinateur descendant (e f)

Vous devriez certainement être familier avec cela. Le sélecteur descendant localise tout élément F descendant de l'élément E (éléments enfants, éléments petits-enfants, éléments de l'arrière-petit-enfant, etc.). Par exemple, OL LI localise des éléments Li situés dans une liste ordonnée. Cela comprendra l'élément Li imbriqué en UL dans OL, ce qui peut ne pas être ce que vous voulez.

sous-combinateur (e & gt; f)

Ce sélecteur correspond à n'importe quel élément f comme l'élément enfant direct Direct de l'élément E - Tout autre élément imbriqué sera ignoré. Poursuivant l'exemple ci-dessus, OL & GT;

Selecteur de frère voisin ou Selecteur du prochain frère (E F)

Cela correspondra à n'importe quel élément F qui partage le même élément parent que E et est directement derrière dans la balise. Par exemple, Li Li localisera tous les éléments Li dans un conteneur donné, à l'exception du premier élément Li.

Sélecteur de frère universel ou sélecteur de frère ultérieur (e ~ f)

C'est un peu délicat. Il correspondra à n'importe quel élément F qui partage le même élément parent que n'importe quel e et est derrière dans la balise. Par conséquent, H1 ~ H2 correspondra à tout H2 qui se situe après H1, tant qu'ils partagent tous le même élément parent direct - c'est-à-dire, tant que H2 n'est imbriqué dans aucun autre élément.

Regardons un exemple simple:

<header>
  <h1 id="Main-title">Main title</h1>
  <h2 id="This-subtitle-is-matched">This subtitle is matched</h2>
</header>
<article>
  <p>blah, blah, blah …</p>
  <h2 id="This-is-not-matched-by-h-h-but-is-by-header-h">This is not matched by h1 ~ h2, but is by header ~ h2</h2>
  <p>blah, blah, blah …</p>
</article>

Les chaînes de sélecteur H1 ~ H2 correspondent au premier H2, car H1 et H2 sont à la fois des enfants de l'en-tête ou des descendants directs. Le prochain H2 que vous verrez dans l'extrait de code ne correspond pas car son élément parent est un article, pas un en-tête. Cependant, il correspondra à l'en-tête ~ H2. De même, H2 ~ p correspond uniquement au dernier paragraphe, car le premier paragraphe est avant H2, il partage avec l'article de l'élément parent.

Remarque: Pourquoi n'y a-t-il pas de sélecteur "parent"?

Vous remarquerez que jusqu'à présent, il n'y a pas de sélecteurs "père" ou "ancêtre", ni sélecteurs "pré-frère". Les performances du navigateur ayant à traverser l'arbre Dom vers l'arrière ou récursif à un ensemble élément imbriqué avant de décider s'il faut appliquer le style, empêchant la capacité d'avoir un sélecteur natif "Travel l'arbre Dom vers le haut".

jQuery contient: a () comme sélecteur d'ancêtre. Ce sélecteur est pris en compte pour le niveau 4 du sélecteur CSS, mais n'a été mis en œuvre dans aucun navigateur. Si et quand il est mis en œuvre, nous pourrons utiliser e: a (f) pour trouver e avec f comme descendant, e: a (& gt; f) pour trouver e avec f comme élément enfant direct, e: a (f (f ) trouver E directement devant frère F, et similaire.

Parcourez les feuilles de style du HTML5 Herald et vous verrez que nous utilisons ces sélecteurs dans de nombreux endroits. Par exemple, lors de la détermination de la disposition globale du site, nous voulons que les divs des trois colonnes flottent vers la gauche. Pour éviter d'appliquer ce style à toute autre division imbriquée à l'intérieur, nous utilisons un sous-sélectionneur:

main > div {
  float: left;
  overflow: hidden;
}

Alors que nous ajoutons de nouveaux styles au site dans les prochains chapitres, vous verrez bon nombre de ces types de sélecteurs.

Sélecteur d'attribut

CSS2 introduit plusieurs sélecteurs de propriété. Ceux-ci permettent la correspondance en fonction des attributs de l'élément. CSS3 étend ces sélecteurs de propriétés pour permettre un positionnement en fonction de la correspondance du modèle. Le niveau 4 du sélecteur CSS en a ajouté un peu plus:

e [att] correspond à n'importe quel élément e avec l'attribut d'attribut quelle que soit la valeur de l'attribut. Nous l'avons utilisé dans le chapitre 4 pour styliser l'entrée requise; l'entrée: les travaux requis dans les derniers navigateurs, mais l'entrée [requise] a le même effet et fonctionne dans IE7 et IE8.

e [att = val] correspond à n'importe quel élément e avec l'attribut attribute et sa valeur est val. Bien qu'il ne soit pas nouveau, il est utile de localiser les types d'entrée de formulaire;

e [attr | = val] correspond à tout élément dont l'attribut attribut a une valeur de val ou commence par val-. Ceci est le plus souvent utilisé dans l'attribut Lang. Par exemple, p [lang | = "en"] correspondra à tout paragraphe défini en anglais, que ce soit en anglais britannique ou américain, en utilisant

ou

.

e [attir ~ = val] correspond à tout élément dont l'attribut attribut contient le mot complet Val (enfermé par des espaces). Par exemple, .info [title ~ = More] correspondra à n'importe quel élément avec des informations de classe et l'attribut de titre contient le mot "plus", tel que "cliquez ici pour en savoir plus".

e [att ^ = Val] correspond à tout élément dont l'attribut attribut commence par la valeur val. En d'autres termes, Val correspond au début de la valeur de la propriété.

e [att $ = val] correspond à tout élément dont l'attribut attribue se termine par . En d'autres termes, Val correspond à la fin de la valeur de la propriété.

e [attr = val] correspond à tout élément dont l'attribut attribut correspond à Val à n'importe quelle position. Il est similaire à e [attrait ~ = val], sauf que Val peut faire partie d'un mot. En utilisant le même exemple qu'avant, .fakeLink [title = info] {} correspondra à n'importe quel élément avec class FakeLink et l'attribut de titre contient les informations de chaîne, telles que "cliquez ici pour en savoir plus".

Dans ces sélecteurs de propriétés, la valeur de Val est sensible à la casse pour la valeur sensible à la cas en HTML. Par exemple, l'entrée [classe ^ = "btn"] est sensible à la casse car les noms de classe sont sensibles à la casse, mais l'entrée [type = "Checkbox"] est sensible à la casse car les valeurs de type sont insensibles à la casse dans HTML.

Si la valeur est alphanumérique, la valeur n'est pas nécessaire, mais il y a quelques exceptions. Des cordes vides, des chaînes commençant par des nombres, deux traits de traits et d'autres cas spéciaux doivent être enfermés en guillemets. Puisqu'il y a des exceptions, c'est une bonne idée de développer l'habitude d'inclure toujours des citations pour les situations où des citations sont nécessaires.

Dans le niveau de sélecteur CSS 4, nous pouvons réaliser l'insensibilité à la cas en incluant un I avant le support de fin, E [att * = val i].

FAQ sur les sélecteurs relationnels et les sélecteurs d'attribut dans CSS3

Quelle est la différence entre un sélecteur de relation et un sélecteur de propriété dans CSS3?

Le sélecteur de relations dans CSS3 est utilisé pour sélectionner des éléments en fonction de leur relation avec d'autres éléments dans un document HTML. Par exemple, les éléments enfants, les descendants, les frères voisins et les sélecteurs de frère universel sont tous des types de sélecteurs relationnels. D'un autre côté, le sélecteur d'attribut est utilisé pour sélectionner un élément en fonction de sa valeur d'attribut ou d'attribut. Par exemple, vous pouvez utiliser le sélecteur de propriétés pour sélectionner tous les éléments d'entrée avec un attribut de type de "texte".

Comment utiliser un sous-combinateur dans CSS3?

Le sous-combinateur de CSS3 est représenté par le symbole "& gt;". Il est utilisé pour sélectionner des éléments enfants directs d'un élément spécifique. Par exemple, si vous souhaitez sélectionner tous les éléments Direct Div div de l'élément parent avec la classe "parent", vous devez écrire le CSS:

suivant:

.parent > div { /* CSS 属性在此处 */ }

Puis-je utiliser plusieurs sélecteurs de propriétés dans CSS3?

Oui, vous pouvez utiliser plusieurs sélecteurs de propriétés dans CSS3. Cela vous permet de sélectionner des éléments qui remplissent plusieurs conditions d'attribut. Par exemple, si vous souhaitez sélectionner tous les éléments d'entrée avec l'attribut de type "texte" et l'attribut de nom "nom d'utilisateur", vous devez écrire les CSS suivants:

input[type="text"][name="username"] { /* CSS 属性在此处 */ }

Quel est le but du Brother Combinator adjacent dans CSS3?

Le combiner frère adjacent dans CSS3 est représenté par le symbole "". Il est utilisé pour sélectionner des éléments directement derrière un autre élément spécifique, et les deux éléments partagent le même élément parent. Par exemple, si vous souhaitez sélectionner un élément div qui est directement derrière l'élément P, vous devez écrire le CSS suivant:

p div { /* CSS 属性在此处 */ }

Comment sélectionner un élément avec une valeur d'attribut spécifique dans CSS3?

Pour sélectionner un élément avec une valeur d'attribut spécifique dans CSS3, utilisez le sélecteur d'attribut, le nom d'attribut et la valeur avec des crochets. Par exemple, si vous souhaitez sélectionner tous les éléments d'entrée avec l'attribut de type "texte", vous devez écrire les CSS suivants:

input[type="text"] { /* CSS 属性在此处 */ }

Puis-je combiner des sélecteurs de relations et attribuer des sélecteurs dans CSS3?

Oui, vous pouvez combiner des sélecteurs de relations et attribuer des sélecteurs dans CSS3. Cela vous permet de sélectionner des éléments en fonction de leur relation avec d'autres éléments et leurs propriétés. Par exemple, si vous souhaitez sélectionner tous les éléments d'entrée de l'enfant directe d'un élément de formulaire avec la classe "formulaire", où l'attribut de type de l'élément d'entrée est "texte", vous devez écrire les CSS suivants:

form.form > input[type="text"] { /* CSS 属性在此处 */ }

Qu'est-ce que le frère Universal Brother Combinator dans CSS3?

Le combinateur de frère universel dans CSS3 est représenté par le symbole "~". Il est utilisé pour sélectionner les frères et sœurs d'un élément spécifique, quelle que soit leur commande dans le document HTML. Par exemple, si vous souhaitez sélectionner tous les éléments divères de l'élément P, vous devez écrire le CSS suivant:

p ~ div { /* CSS 属性在此处 */ }

Comment sélectionner des éléments de CSS3 qui n'ont pas d'attributs spécifiques?

Pour sélectionner des éléments qui n'ont pas d'attributs spécifiques dans CSS3, utilisez la pseudo-classe: non () avec sélecteur d'attribut. Par exemple, si vous souhaitez sélectionner tous les éléments d'entrée dont l'attribut de type n'est pas "soumettre", vous devez écrire les CSS suivants:

input:not([type="submit"]) { /* CSS 属性在此处 */ }

Puis-je utiliser des sélecteurs de relations dans CSS3 avec des pseudo-classes?

Oui, vous pouvez utiliser des sélecteurs de relation dans CSS3 avec des pseudo-classes. Cela vous permet de sélectionner des éléments en fonction de leur relation avec d'autres éléments et de leur état. Par exemple, si vous souhaitez sélectionner tous les éléments directs un élément de l'élément de navigation qui est en train de planer, vous devez écrire le CSS suivant:

nav > a:hover { /* CSS 属性在此处 */ }

Comment sélectionner un élément de CSS3 qui contient un attribut spécifique avec une valeur spécifique?

Pour sélectionner un élément qui contient un attribut spécifique avec une valeur spécifique dans CSS3, utilisez le sélecteur de propriétés à crochet carré, le nom et la valeur de l'attribut et l'opérateur * =. Par exemple, si vous souhaitez sélectionner tous les éléments A avec des attributs HREF contenant "Exemple", vous devez écrire les CSS suivants:

a[href*="example"] { /* CSS 属性在此处 */ }

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!