Quels sont les sélecteurs en CSS ?

<p>CSS est un langage de feuille de style utilisé pour la conception Web, qui vous permet de contrôler l'apparence et la mise en page des pages Web. Le sélecteur est l'une des parties les plus importantes du CSS, qui peut nous aider à trouver l'élément HTML dont nous voulons changer le style. Cet article présentera en détail les types de sélecteurs couramment utilisés en CSS.

<p>1. Sélecteur de base

<li> Sélecteur de balise : sélectionnez les éléments par nom de balise HTML.

<p>Par exemple :

p {
  color: red;
}

<p>Le code ci-dessus changera la couleur du texte de tous les éléments <p> du document HTML en rouge. <p>元素的文字颜色改为红色。

<li>类选择器：通过class属性选择一个或多个元素。

<p>例如：

.blue {
  color: blue;
}

<p>上面的代码会将所有拥有class属性为"blue"的元素的文字颜色改为蓝色。

<li>ID选择器：通过id属性选择一个唯一的元素。

<p>例如：

#header {
  width: 100%;
}

<p>上面的代码会将拥有id属性为"header"的元素的宽度调整为100%。

<p>二、组合选择器

<li>后代选择器：选择后代元素。

<p>例如：

header nav {
  background-color: blue;
}

<p>上面的代码会将<header>元素下的所有<nav>元素的背景颜色改为蓝色。

<li>子元素选择器：选择子元素。

<p>例如：

ul > li {
  font-size: 16px;
}

<p>上面的代码会将所有的<ul>元素中的直接子元素<li>的字体大小设置为16像素。

<p>三、属性选择器

<li>属性选择器：通过属性名称来选择元素。

<p>例如：

a[href="https://www.example.com"] {
  color: green;
}

<p>上面的代码会将所有链接到https://www.example.com的锚点元素颜色设置为绿色。

<li>存在选择器：选择所有包含该属性的元素。

<p>例如：

input[type="text"] {
  background-color: #f2f2f2;
}

<p>上面的代码会将所有拥有type属性为"text"的<input>元素的背景颜色设置为灰白色。

<p>四、伪类选择器

<li>链接伪类：通过元素是否为链接来选择元素。

<p>例如：

a:hover {
  color: red;
}

<p>上面的代码会将所有在鼠标悬停时的链接的颜色设置为红色。

<li>焦点伪类：通过用户是否已将某个元素设置为焦点来选择元素。

<p>例如：

input:focus {
  border: 2px solid green;
}

<p>上面的代码会在用户将某个<input>元素设置为焦点时，将该元素的边框颜色设置为绿色。

<p>五、伪元素选择器

<li>::before 和 ::after：在被选择元素的内容的前面或后面插入生成的内容。

<p>例如：

h1::before {
  content: ">> ";
}

<p>上面的代码会在所有<h1>元素的前面插入一个带有两个大于号的内容。

<li>::first-letter 和 ::first-line：选择元素的第一个字母或第一行文本。

<p>例如：

p::first-letter {
  font-size: 20px;
}

<p>上面的代码会将每个<p>

Sélecteur de classe : Sélectionnez un ou plusieurs éléments via l'attribut class. <p>
<p>Par exemple :
rrreee🎜Le code ci-dessus changera la couleur du texte de tous les éléments avec l'attribut de classe "blue" en bleu. 🎜
🎜Sélecteur ID : sélectionnez un élément unique via l'attribut id. 🎜🎜🎜Par exemple : 🎜rrreee🎜Le code ci-dessus ajustera la largeur de l'élément avec l'attribut id "header" à 100 %. 🎜🎜2. Sélecteur de combinaison🎜🎜🎜Sélecteur descendant : sélectionnez les éléments descendants. 🎜🎜🎜Par exemple : 🎜rrreee🎜Le code ci-dessus changera la couleur d'arrière-plan de tous les éléments <nav> sous l'élément <header> en bleu. 🎜
🎜Sélecteur d'élément enfant : sélectionnez les éléments enfants. 🎜🎜🎜Par exemple : 🎜rrreee🎜Le code ci-dessus définira la taille de police de tous les éléments enfants directs <li> dans tous les éléments <ul> à 16 pixels. . 🎜🎜3. Sélecteur d'attribut 🎜🎜🎜Sélecteur d'attribut : sélectionnez les éléments par nom d'attribut. 🎜🎜🎜Par exemple : 🎜rrreee🎜Le code ci-dessus définira la couleur de tous les éléments d'ancrage liés à https://www.example.com sur vert. 🎜
🎜Selector existe : sélectionne tous les éléments contenant cet attribut. 🎜🎜🎜Par exemple : 🎜rrreee🎜Le code ci-dessus définira la couleur d'arrière-plan de tous les éléments <input> avec un attribut de type "text" sur blanc cassé. . 🎜🎜4. Sélecteur de pseudo-classe 🎜🎜🎜Pseudo-classe de lien : sélectionnez des éléments selon qu'il s'agit de liens. 🎜🎜🎜Exemple : 🎜rrreee🎜Le code ci-dessus définira la couleur de tous les liens en rouge au survol de la souris. 🎜
🎜Pseudo-classe Focus : sélectionnez un élément selon que l'utilisateur a défini ou non le focus sur un élément. 🎜🎜🎜Par exemple : 🎜rrreee🎜Le code ci-dessus définira la couleur de la bordure d'un élément <input> sur vert lorsque l'utilisateur définit l'élément sur le focus. 🎜🎜5. Sélecteur de pseudo-éléments🎜🎜🎜 ::before et ::after : Insérez le contenu généré avant ou après le contenu de l'élément sélectionné. 🎜🎜🎜Par exemple : 🎜rrreee🎜Le code ci-dessus insérera un contenu avec deux signes supérieur à devant tous les éléments <h1>. 🎜
🎜::first-letter et ::first-line : Sélectionnez la première lettre ou la première ligne de texte de l'élément. 🎜🎜🎜Par exemple : 🎜rrreee🎜Le code ci-dessus définira la taille de la police de la première lettre de chaque élément <p> à 20 pixels. 🎜🎜Résumé : 🎜🎜Ce qui précède sont les types de sélecteurs couramment utilisés en CSS, grâce auxquels les pages Web peuvent mieux afficher différents styles. Dans la conception Web réelle, nous pouvons choisir différents sélecteurs à utiliser en fonction de la situation réelle pour obtenir de meilleurs résultats. 🎜

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!