Quels types de sélecteurs CSS existe-t-il ? Une brève introduction aux sélecteurs CSS courants

Le contenu de cet article explique comment utiliser les sélecteurs CSS. Quels sont les types ? Une brève introduction aux sélecteurs CSS couramment utilisés a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

sélecteur de balise CSS

Fonction : Sélectionnez tous les éléments spécifiés dans la page

Syntaxe : Nom de la balise : {}

sélecteur d'identifiant

Fonction : sélectionnez le seul élément de l'élément via sa valeur d'attribut id

Syntaxe : #id{}

Classe CSS sélecteur

Fonction : Sélectionnez un groupe d'éléments via la valeur d'attribut de classe de l'élément

Syntaxe : la valeur d'attribut .class {}

peut être définie pour un élément à en même temps Plusieurs valeurs d'attribut de classe, séparées par des espaces

Regroupement de sélecteurs (sélecteur d'union)

Fonction : Le regroupement de sélecteurs peut être utilisé en même temps Sélectionnez les éléments correspondant à sélecteurs multiples

Syntaxe : Sélecteur 1, Sélecteur 2, Sélecteur N{}

Exemple : Sélectionnez l'identifiant comme p3 et la valeur de l'attribut de classe contient les balises p2 et h1

                 #p3,.p2,h1{
                                  background-color: yellow;
                            }

Sélecteur de caractères génériques CSS

Fonction : Sélectionnez tous les éléments de la page

Syntaxe : *{}

sélecteur d'intersection CSS ( sélecteur composite)

Fonction : Vous pouvez sélectionner des éléments qui satisfont plusieurs sélecteurs en même temps

Syntaxe : Sélecteur 1 Sélecteur 2 Sélecteur N{}

Remarque : Étant donné que id peut déterminer de manière unique un élément, n'utilisez pas le sélecteur d'intersection pour id

Exemple : Sélectionnez span

span.p4{
                                    background-color:#4169E1;
                           }

< dont la valeur d'attribut de classe contient p4 🎜>Relation entre les éléments :

Élément parent : un élément qui contient directement des éléments enfants.

Élément enfant : un élément directement contenu par l'élément parent.

Élément ancêtre : élément qui contient directement ou brièvement des éléments descendants. L'élément parent est également un élément ancêtre.

Éléments descendants : les éléments qui sont directement ou indirectement contenus par les éléments ancêtres sont également des éléments descendants.

Éléments frères et sœurs : éléments avec le même élément parent.

Sélecteur d'éléments descendants CSS

Fonction : Sélectionnez les éléments descendants de l'élément spécifié

Syntaxe : Élément descendant d'élément ancêtre {}

Exemple : Sélectionnez span dans div

  div span {
                                        color: chartreuse;
                                }

Sélecteur d'élément enfant CSS (non pris en charge par les navigateurs IE6 et inférieurs)

Fonction : Sélectionnez l'élément parent spécifié Spécifié élément enfant

syntaxe : élément parent> élément enfant

Exemple : sélectionnez le sélecteur de pseudo-classe span

                 div>span{
                              background-color: yellow;
                     }

dans un div pour représenter les éléments dans un état spécial .

Par exemple : hyperliens visités, hyperliens ordinaires, zones de texte ciblées

Lorsque nous devons définir des styles pour les éléments dans ces états spéciaux, nous pouvons les utiliser Le style défini par le pseudo -classe pour la connexion

Lien normal : a:link

Lien visité : a:visited (seule la couleur peut être définie)

Le lien sur lequel passe la souris : a:hover

Le lien sur lequel on clique : a:active

L'ordre entre a:link et a:visited n'est pas précisé, mais ils doivent être avant a:hover et a:active , a:hover doit être devant a:active

hover et active peuvent également être définis pour d'autres éléments tels que p:hover p:active, mais ie6 et inférieurs ne prennent pas en charge

autre pseudo Classe :

:focus Obtenir le focus

:before Avant de spécifier l'élément

:after Après avoir spécifié l'élément

: :selection L'élément sélectionné (il doit être utilisé comme ceci dans Firefox::-moz-selection)

Utiliser des pseudo-éléments pour représenter certaines positions spéciales dans l'élément

: first-letter : le premier caractère

:fist-line : La première ligne de caractères

:before : Représente la partie avant de l'élément

Généralement, avant doit être utilisé en conjonction avec le style de contenu,

Vous pouvez ajouter du contenu à la position avant ou après via le contenu

:after : Représente le dernier côté de l'élément

Définissez le premier caractère de la balise p sur jaune 25px

   p:first-letter{
                        color:yellow;
                        font-size: 25px;
                    }
                   p:first-line{
                       background: #FF0000;
                   }
                  将content的内容添加到p元素的最前面
                   p:before{
                       content: "ABC";
                   }
                   将content的内容添加到p元素的最后面
                   p:after{
                       content: "DEF";
                   }

sélecteur d'attribut CSS

Fonction : Vous pouvez sélectionner l'élément spécifié en fonction de l'attribut ou valeur d'attribut dans l'élément

Syntaxe : [Nom de l'attribut] Sélectionnez les éléments avec les attributs spécifiés

[Nom de l'attribut=Valeur de l'attribut] Sélectionnez les éléments avec les valeurs d'attribut spécifiées

[Attribut nom^=Valeur d'attribut] Sélectionnez les éléments dont les valeurs d'attribut commencent par le contenu spécifié

[Nom de l'attribut$=Valeur d'attribut] Sélectionnez les éléments dont la valeur d'attribut se termine par le contenu spécifié

[Attribut value*=Valeur d'attribut] Sélectionnez les éléments dont la valeur d'attribut inclut le contenu spécifié

    /*为具有title属性的p元素设置背景颜色*/
                p[title]{
                     color: darkorchid;
                }
                /*为title属性值为hello的元素设置一个背景颜色*/
                p[title=hello]{
                     background-color: cornflowerblue;
                }
                /*为title属性是ab开头的元素设置一个背景颜色*/
                p[title^="ab"]{
                     background-color: chartreuse;
                }
                p[title$="d"]{
                     font-size: 28px;
                }

Sélecteur d'élément enfant de pseudo-classe

:first-child : Le premier enfant l'élément peut être sélectionné

:last-child : Le dernier élément peut être sélectionné

:nth-child : Vous pouvez sélectionner un élément enfant à n'importe quelle position

Vous pouvez spécifier un paramètre après ce sélecteur pour spécifier quel élément sélectionner

pair : pair

impair : nombre impair Similaire à xxx-chlid, mais xxx-child sélectionne parmi tous les éléments, et xxx-of- type sélectionne

à partir du type spécifié. Exemple : Sélectionnez la première balise p

<🎜 > Le sélecteur d'élément frère suivant

Fonction : Vous pouvez sélectionner immédiatement l'élément frère spécifié. après un élément

语法：前一个+后一个

例：选中p标签后的相邻的兄弟span（p和span不一定相邻）

  p+span{
                                     color:red;
                            }

选中后边的所有兄弟元素

语法：前一个~后边所有

否定伪类：

作用：从选种的元素中剔除某些元素

语法： :not(选择器)

例：为所有的p元素设置一个背景颜色，出了class为hello或hello2的元素

              p:not(.hello):not(.hello2){
                                  background-color: antiquewhite;
                          }

相关文章推荐：

什么是css？css三种样式以及文字属性的介绍

CSS布局有哪些？css常见的布局方式（附代码）

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!