Maîtrisez les sélecteurs avancés : améliorez vos compétences CSS

Améliorez vos compétences CSS : maîtrisez la magie des sélecteurs avancés

CSS (Cascading Style Sheets) fait partie intégrante de la conception et du développement Web. Maîtriser les bases du CSS est essentiel pour créer des pages Web belles et fonctionnelles. Cependant, si vous souhaitez aller plus loin et améliorer vos compétences CSS et créer des conceptions Web plus complexes et uniques, la maîtrise des sélecteurs avancés sera essentielle.

Les sélecteurs avancés permettent aux développeurs d'utiliser des méthodes plus sophistiquées pour sélectionner et styliser les éléments de la page Web, au-delà des simples sélecteurs de balises et des sélecteurs de classe. Ce qui suit présentera certains sélecteurs avancés couramment utilisés, ainsi que leur utilisation et des exemples de code spécifiques.

<li>Sélecteur d'attribut
Le sélecteur d'attribut vous permet de sélectionner des éléments en fonction de leurs attributs et valeurs d'attribut. Les sélecteurs d'attributs courants sont les suivants : <li> [attr] : sélectionnez des éléments avec des attributs spécifiés [attr]：选择具有指定属性的元素 <li> [attr=value]：选择具有指定属性且属性值等于给定值的元素 <li> [attr^=value]：选择具有指定属性且属性值以给定值开头的元素 <li> [attr$=value]：选择具有指定属性且属性值以给定值结尾的元素 <li> [attr*=value]：选择具有指定属性且属性值包含给定值的元素

例如，要选择所有带有"data-"开头的属性的元素，可以使用属性选择器：[data-]。要选择所有class属性以"btn-"开头的元素，可以使用属性选择器：[class^="btn-"]。

<li>伪类选择器
伪类选择器允许你根据元素的状态或特定条件来选择元素。一些常见的伪类选择器包括： <li> :hover：选择鼠标悬停在上面的元素 <li> :active：选择处于活动状态的元素（例如点击时） <li> :visited：选择已访问过的链接 <li> :nth-child(n)：选择在其父元素中的第n个子元素 <li> :first-child：选择在其父元素中的第一个子元素 <li> :last-child：选择在其父元素中的最后一个子元素

例如，要选择表格中的奇数行，可以使用伪类选择器：tr:nth-child(odd)。要选择表格中的第一行，可以使用伪类选择器：tr:first-child。

<li>组合选择器
组合选择器允许你结合多个选择器来选择元素。常见的组合选择器包括： <li> selector1, selector2：选择所有符合selector1或selector2的元素 <li> selector1 selector2：选择符合selector1的元素的后代元素中符合selector2的元素 <li> selector1 > selector2：选择符合selector1的元素的子元素中符合selector2的元素 <li> selector1 + selector2：选择符合selector1的元素的后面紧邻的符合selector2的元素 <li> selector1 ~ selector2：选择符合selector1的元素后面的所有符合selector2的元素

例如，要选择<div>中的所有<code><p></p>和<span></span>元素，可以使用组合选择器：div p, div span。要选择<ul></ul>的直接子元素<li>，可以使用组合选择器：ul > li[attr=value] : sélectionnez des éléments avec des attributs et des attributs spécifiés. Éléments dont la valeur est égal à la valeur donnée

[attr^=value] : sélectionne les éléments avec l'attribut spécifié et la valeur de l'attribut commence par la valeur donnée

[attr$=value] code> code> : Sélectionnez les éléments avec l'attribut spécifié et la valeur de l'attribut se termine par la valeur donnée<p></p> <code>[attr*=value] : Sélectionnez les éléments avec l'attribut spécifié et la valeur de l'attribut contient la valeur donnée

Par exemple, pour sélectionner tous les éléments dont les attributs commencent par "data-", vous pouvez utiliser le sélecteur d'attribut : [data-]. Pour sélectionner tous les éléments dont l'attribut de classe commence par "btn-", vous pouvez utiliser le sélecteur d'attribut : [class^="btn-"]. 🎜

🎜Sélecteurs de pseudo-classe🎜Les sélecteurs de pseudo-classe vous permettent de sélectionner des éléments en fonction de leur état ou de conditions spécifiques. Certains pseudo-sélecteurs courants incluent : 🎜🎜:hover : sélectionne les éléments survolés 🎜🎜:active : sélectionne les éléments qui sont actifs (par exemple, l'heure du clic) 🎜🎜:visited

 : Sélectionnez un lien visité 🎜🎜:nth-child(n) : Sélectionnez le nième élément enfant dans son élément parent🎜🎜 :first-child code> : Sélectionnez le premier élément enfant dans son élément parent🎜🎜<code>:last-child : Sélectionnez le dernier élément enfant dans son élément parent🎜 🎜Par exemple, pour sélectionner des lignes impaires dans un tableau, vous pouvez utiliser le sélecteur de pseudo-classe : tr:nth-child(odd). Pour sélectionner la première ligne d'un tableau, vous pouvez utiliser le sélecteur de pseudo-classe : tr:first-child. 🎜

🎜Sélecteurs combinés🎜Les sélecteurs combinés vous permettent de combiner plusieurs sélecteurs pour sélectionner des éléments. Les sélecteurs de combinaison courants incluent : 🎜🎜selector1, selector2 : sélectionnez tous les éléments qui correspondent au sélecteur1 ou au sélecteur2 🎜🎜selector1 selector2 : sélectionnez les éléments qui correspondent aux descendants des éléments qui correspondent aux éléments du sélecteur1 du sélecteur2🎜🎜sélecteur1 > sélecteur2 : sélectionnez les éléments qui correspondent au sélecteur2 parmi les éléments enfants des éléments qui correspondent au sélecteur1🎜🎜sélecteur1 + sélecteur2 : sélectionnez les éléments qui correspondent au sélecteur1 après Les éléments adjacents qui correspondent au sélecteur2🎜🎜sélecteur1 ~ sélecteur2 : sélectionnez tous les éléments qui correspondent au sélecteur2 après l'élément qui correspond au sélecteur1🎜

🎜Par exemple, pour sélectionner <div> Tous les éléments <code><p></p> et <span></span> du code> peuvent utiliser le sélecteur combiné : div p, div span. Pour sélectionner l'élément enfant direct de <ul></ul> <li>, vous pouvez utiliser le sélecteur de combinaison : ul > 🎜🎜La maîtrise des sélecteurs avancés vous donnera une compréhension plus approfondie du CSS, apportant plus de flexibilité et de créativité à votre conception et développement Web. En utilisant des sélecteurs d'attributs, des sélecteurs de pseudo-classes et des sélecteurs de combinaisons, vous pouvez sélectionner et styliser des éléments spécifiques avec précision. 🎜🎜Voici un exemple de code spécifique qui montre comment utiliser des sélecteurs d'attributs et des sélecteurs de pseudo-classe pour créer un élément bouton avec des effets spéciaux : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; /* 属性选择器 */ button[data-color=&quot;red&quot;] { color: white; background-color: red; } button[data-color=&quot;blue&quot;] { color: white; background-color: blue; } /* 伪类选择器 */ button:hover { font-weight: bold; } button:active { transform: scale(0.9); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;button data-color=&quot;red&quot;&gt;红色按钮&lt;/button&gt; &lt;button data-color=&quot;blue&quot;&gt;蓝色按钮&lt;/button&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">Copier après la connexion</div></div>🎜Le code ci-dessus utilise des sélecteurs d'attributs et des sélecteurs de pseudo-classe pour réaliser lorsque la souris Le texte devient gras lorsque vous survolez le bouton et réduit à 90 % lorsque vous cliquez sur le bouton. En utilisant des sélecteurs avancés, nous pouvons facilement ajouter différents styles à différents boutons. 🎜🎜En bref, pour améliorer vos compétences CSS, maîtriser les sélecteurs avancés est une étape très importante. En apprenant et en appliquant des sélecteurs d'attributs, des sélecteurs de pseudo-classes et des sélecteurs de combinaisons, vous serez en mesure de créer des conceptions Web plus complexes et uniques, rendant vos pages Web plus attrayantes et impressionnantes. 🎜