Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Sélecteur de style, utilisé pour sélectionner des éléments HTML dans la page pour ajouter des styles CSS.

Trier par performances de rendu de haut en bas Suivi de:

IDENTIFIANT Sélecteur #id

Sélectionnez les éléments par leur attribut id, sensible à la casse

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

Mais son utilisation est déconseillée car :

• Le sélecteur d'identifiant a une priorité plus élevée et n'est pas pratique pour réinitialiser le style.
• Le sélecteur d'identifiant est principalement utilisé par JS

sélecteur de classe .class

Via l'attribut class de l'élémentstyleLe nom de classe de l'élément sélectionné est sensible à la casse

Le sélecteur CSS le plus recommandé est que les sélecteurs de classe ont une sémantique forte et sont faciles à réinitialiser.

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

Plusieurs classes de style peuvent être ajoutées au même élément, séparées par des espaces.

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

sélecteur de balises 标签名

Sélectionnez les éléments par leurs noms de balises, sans tenir compte de la casse

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

Non recommandé en raison des mauvaises performances du sélecteur de balises et des coûts de maintenance élevés

sélecteur de caractères génériques *

Sélectionnez tous les éléments HTML de la page à l'exception des pseudo-éléments. Il est souvent utilisé pour effacer le style par défaut du navigateur, mais il n'est pas recommandé car cela consomme des performances.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

sélecteur d'attribut [属性]

Sélectionnez les éléments en fonction de leurs attributs et de leurs valeurs d'attribut. Les attributs ne sont pas sensibles à la casse et les valeurs d'attribut sont sensibles à la casse.

Sélecteur de pseudo-classe :状态名

Sélectionner des éléments en fonction de leurs différents états

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

Utiliser des sélecteurs de pseudo-classes dans les listes

n signifie 0,1,2,3,4,5,6,7,8... (Il n'est pas valide lorsque n est inférieur à 1, car n = 0 ne sera pas sélectionné)

Utiliser des sélecteurs de pseudo-classes dans les tableaux

• tr:nth-child(odd)：Correspond aux lignes 1, 3 et 5 du tableau, ce qui équivaut àtr:nth-child(2n+1)。
• tr:nth-child(even): Correspond aux lignes 2, 4 et 6 du tableau, ce qui équivaut àtr:nth-child(2n)。

• Exemple pratique de sélecteur de pseudo-classe

  • Utilisez :nth-child() pour implémenter des rayures zébrées, l'alignement des bords, la mise en surbrillance de la liste de plages spécifiées et la disposition adaptative de la liste dynamique
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS implémente l'affichage et le masquage dynamiques (la merveilleuse utilisation de :checked et :target)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • Utilisation : cible pour agrandir davantage, réduire et changer d'onglethttps://blog.csdn.net/weixin_41192489/article/details/121969768

  • Utilisez : placeholder-shown pour obtenir une interaction avec le style MaterialDesign
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • Utilisez:placeholder-shown pour vérifier la valeur nulle et l'invite ne peut pas être vide.
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked implémente l'expansion et l'effondrement
    https://demo.cssworld.cn/selector/9/2-1.php

  • : coché implémente le changement d'onglet
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked implémente des boutons radio personnalisés, des cases à cocher, des commutateurs, des vérifications d'étiquettes et des sélections radio de matériaux
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • Utilisez :valid et :invalid pour implémenter la validation de formulaire natif
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • Utilisez :required et :optional pour implémenter le texte d'invite de vérification du formulaire
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within implémente la liste déroulante
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • Lorsque la zone de saisie est focalisée, mettez en surbrillance l'étiquette devant (voir méthode 5 dans le lien)
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • Passez la souris pour afficher l'image agrandie ou cliquez sur la souris pour afficher l'image agrandie
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty masque les éléments vides et les champs manquants. Astuces intelligentes
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child implémente une animation de chargement dynamique multi-états
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen permet l'affichage plein écran des images cliquées
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  Sélecteur de pseudo-éléments ::

  Utilisé pour sélectionner et styliser une partie d'un élément, plutôt que l'élément entier

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before et::after

  Il doit être utilisé avec l'attribut content pour définir le contenu avant et après l'élément. Pour plus de détails, voir.
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  Exemples pratiques couramment utilisés :

  • Ajoutez des icônes avant et après les éléments (la magie de ::before et ::after)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS utilise intelligemment ::after et ::before pour implémenter la navigation verticale dans les catégories
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • css utilise intelligemment ::after pour réaliser une animation de changement d'onglet
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Initiales

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line première rangée

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection Faites glisser la souris pour sélectionner la zone

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder espace réservé au texte

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  Sélecteur de relation

  Sélectionnez des éléments en fonction des relations entre les éléments

  sélecteur de descendants >

  La balise de premier niveau enveloppée dans une balise est son descendant

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  sélecteur de descendants 空格

  Toutes les balises au sein d'une balise sont ses descendants

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  sélecteur de frères et sœurs ~

  Sous le même élément parent, sélectionnez l'élément spécifiéaprèsTous les éléments du même niveau, donc à proprement parler, devraient être appelés 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS non 前面兄弟选择器 , vous pouvez vous référer au lien ci-dessous pour simuler l'implémentation
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  sélecteur de frère voisin +

  Sélectionne l'élément suivant immédiatement après un élément

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  Sélecteur d'intersection

  Sélectionnez des éléments sur la page qui correspondent à plusieurs sélecteurs en même temps

  • Il n'y a pas d'espaces entre les sélecteurs (les espaces sont des sélecteurs descendants)
  • Si un sélecteur de balises existe, le sélecteur de balises doit être placé en premier

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  Sélecteur d'union ,

  Parmi plusieurs sélecteurs, tant que l'un d'entre eux est satisfait, il sera sélectionné.

  • Utilisé entre plusieurs sélecteurs , séparé

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4