Sélecteur CSS : récupère le premier élément avec la classe spécifiée

Question

J'ai un tas de premiers éléments avec le nom de la classe red 的元素，但我似乎无法使用以下 CSS 规则选择带有 class="red" :

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Qu'est-ce qui ne va pas avec ce sélecteur et comment puis-je le corriger pour cibler le premier enfant de red classe ?

Answer 1

:first-child Le but du sélecteur est, comme son nom l'indique, de sélectionner la première balise enfant de la balise parent. Donc cet exemple fonctionne (je viens de l'essayer ici) :

    
first
    
second

Cependant, cette méthode ne fonctionne pas si vous imbriquez les balises sous différentes balises parents, ou si votre balise redclass n'est pas la première balise sous la balise parent.

Notez également que cela s'applique non seulement à la première balise de ce type dans l'ensemble du document, mais également à chaque fois qu'une nouvelle balise parent l'entoure, par exemple :

    
first
    
second


    
third
    
fourth

first 和 third sera rouge.

Pour votre cas vous pouvez utiliser :nth-of-type le sélecteur :

.red:nth-of-type(1)
{
    border:5px solid red;
} 

    blah
    
first
    
second
    
third
    
fourth

Merci à Martyn, qui a supprimé la réponse contenant cette méthode.

Pour plus d'informations sur :nth-child() 和 :nth-of-type(), veuillez visiter http://www.quirksmode.org/css/nthchild.html.

Veuillez noter qu'il s'agit d'un sélecteur CSS3, donc certaines versions de navigateur désormais obsolètes peuvent ne pas fonctionner comme prévu (par exemple IE8 ou version antérieure). Visitez https://caniuse.com/?search=nth-of-type pour plus de détails.

Answer 2

C'est l'erreur de compréhension de l'auteur selon laquelle la :first-child 如何工作的最著名的例子之一。 CSS2中引入，:first-childpseudo-classe représente le premier enfant de ses parents. C'est ça. Il existe une idée fausse très courante selon laquelle il sélectionne le premier élément enfant qui correspond aux critères spécifiés par le reste du sélecteur composé. En raison du fonctionnement des sélecteurs (voir ici pour une explication), ce n'est tout simplement pas vrai.

Le niveau 3 du sélecteur introduit la pseudo-classe :first-of-type:first-of- type 伪类，表示其元素类型的兄弟元素中的第一个元素。 这个答案图文并茂地解释了 :first-child 和 :first-of-type 之间的区别。但是，与 :first-child 一样，它不会查看任何其他条件或属性。在 HTML 中，元素类型由标签名称表示。在问题中，该类型是 p, qui représente le premier élément parmi ses frères et sœurs de type élément. Cette réponse est expliquée avec des images et text La différence entre :first-child et :first-of-type. Cependant, comme :first-child, il ne prend en compte aucune autre condition ou propriété. En HTML, les types d'éléments sont représentés par des noms de balises. Dans la question, le type est p.

Malheureusement, il n'existe pas de pseudo-classe :first-of-class similaire pour correspondre au premier élément enfant d'une classe donnée. Lorsque cette réponse a été publiée pour la première fois, les niveaux de sélecteur FPWD 4 récemment publiés présentent la pseudo-classe :nth-match() :first-of-class 伪类来匹配给定类的第一个子元素。在首次发布此答案时，新发布的 FPWD选择器级别 4 引入了 :nth-match() 伪类，它是围绕现有选择器机制设计的，正如我在第一段中提到的，通过添加选择器列表参数，您可以通过它提供其余的选择器复合选择器以获得所需的过滤行为。近年来，此功能纳入 :nth-child( ) 本身，选择器列表作为可选的第二个参数出现，以简化事情并避免 :nth-match(), qui est conçue autour du mécanisme de sélection existant, et comme je l'ai mentionné dans le premier paragraphe, en ajoutant le paramètre selector list, vous pouvez fournir le reste des sélecteurs composés du sélecteur pour obtenir le comportement de filtrage souhaité. Ces dernières années, cette fonctionnalité a été incorporée dans  : nth-child() lui-même

, la liste de sélection apparaît comme un deuxième argument facultatif pour simplifier les choses et éviter la fausse impression que :nth-match() correspond dans l'ensemble du document (voir Dernière note ci-dessous).

En attendant le support multi-navigateurs (sérieusement, cela fait presque 10 ans et il n'y a eu qu'une seule implémentation au cours des 5 derniers), voici une solution de contournement Lea Verou et moi avons développé indépendamment (elle est la première chose à faire ! ) consiste d'abord à appliquer le style que vous souhaitez à tous les éléments de cette classe :

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

...puis utilisez remplacez le combinateur générique de frères et sœurs dans la règle ~ :

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Maintenant, seul le premier élément avec class="red" aura une bordure.

Voici les instructions pour appliquer les règles :

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

  blah         
  
first
  
  
second
 
  
third
  
  
fourth