Table des matières:
- Comptes Twitter parodique Tech
- Comptes Twitter parodiques non techniques
- Sélecteur enfant
- Sélecteur descendant
Vidéo: Comment modifier le style CSS avec le Framework jQuery 2025
Lorsque vous stylisez des éléments spécifiques avec CSS, il est utile de visualiser le code HTML en tant qu'arbre généalogique avec les parents, les enfants et les frères et sœurs. Dans l'exemple de code suivant, l'arborescence commence par l'élément
html
, qui a deux enfants
head
et
body
. La
tête
possède un élément enfant appelé
title
. Le
corps
contient des éléments
h1
,
ul
et
p
comme enfants. Enfin, l'élément
ul
contient
li
éléments en tant qu'enfants, et l'élément
p
contient
a
éléments en tant qu'enfants.
Figure 4-3: DOM
Comptes Twitter parodique Tech
Elo musqué ennuyé
Vinod Coleslaw
ebooks cheval
Comptes Twitter parodiques non techniques
Seinfeld moderne
Lord_Voldemort7
Voici comment le code apparaît dans le navigateur .
Cette version montre une représentation du code en utilisant la métaphore de l'arbre.
Ici, chaque relation est montrée une fois. Par exemple, dans le code, un élément
a
se trouve dans chacun des trois éléments
li
, et cette image montre
ul
li
a
relation une fois.
Bored Elon Musk est une parodie d'Elon Musk, le fondateur de PayPal, Tesla et SpaceX. Vinod Coleslaw est une parodie de Vinod Khosla, cofondateur de Sun Microsystems et capital-risqueur. Horse ebooks est un spambot qui est devenu un phénomène Internet.
L'arborescence HTML est appelée DOM ou modèle d'objet document.
Sélecteur enfant
Les tags d'ancrage du compte Twitter Parody Non-Tech sont les enfants immédiats des tags de paragraphe. Si vous souhaitez personnaliser uniquement les comptes Twitter Parody Non-Tech, vous pouvez utiliser le sélecteur enfant,, qui sélectionne les enfants immédiats d'un élément spécifié. Un sélecteur enfant est créé en listant d'abord le sélecteur parent, puis un signe supérieur (>) et enfin le sélecteur enfant.
Dans l'exemple suivant, les balises d'ancrage qui sont les enfants immédiats des balises de paragraphe sont sélectionnées et ces liens hypertexte sont stylisés avec une couleur de police rouge et sans souligné. Les comptes Twitter Parody Tech ne sont pas stylisés, car ils sont les enfants directs de la balise d'élément de liste.
p> a {
couleur: rouge;
text-decoration: aucun;
}
Si vous n'utilisez ici que le sélecteur
a
, tous les liens de la page seront stylisés au lieu d'une simple sélection.
Sélecteur descendant
Les tags d'ancrage du compte Twitter de Parody Tech sont des descendants ou situés dans la liste non ordonnée. Si vous souhaitez styler uniquement les comptes Twitter Parody Tech, vous pouvez utiliser le sélecteur descendant, qui sélectionne non seulement les enfants immédiats d'un élément spécifié mais tous les éléments imbriqués dans l'élément spécifié. Un sélecteur descendant est créé en listant d'abord le sélecteur parent, un espace, et enfin le sélecteur descendant que vous voulez cibler.
Dans l'exemple suivant, les étiquettes d'ancrage qui sont des descendants de la liste non ordonnée sont sélectionnées, et ces liens hypertexte sont stylisés avec une couleur de police bleue et barrés. Les comptes Twitter Parody Non-Tech ne sont pas stylisés car ils ne sont pas des descendants d'une liste non ordonnée.
ul a {
couleur: bleu;
text-decoration: interligne;
}
Intéressé par le style, juste le premier tag d'ancrage dans une liste, comme le compte Twitter de Seinfeld moderne, ou le deuxième élément de la liste, comme le compte Twitter de Vinod Coleslaw? Allez à w3schools. com et en savoir plus sur les sélecteurs
first-child
et
nth-child
.
