Sélecteurs CSS que vous devez connaître

Qu'est-ce qu'un sélecteur:

Chaque définition de style css se compose de deux parties, la forme est la suivante:

[code] 选择器{
样式;
}

[/ code] La partie avant {} est le "sélecteur". Le "sélecteur" spécifie l'objet du "style" dans {}, c'est-à-dire sur quels éléments de la page Web le "style" agit.

Sélecteur de base

Sélecteur de balises (choisissez le nom de la balise) : une page HTML complète est composée de nombreuses balises différentes, et le sélecteur de balises détermine les balises à utiliser le style CSS correspondant
, comme:

p{
color:#900;
font-size:12px;
background:#090;
}

Sélecteur d'ID (## + nom d'ID) : le sélecteur d'ID peut spécifier un style spécifique pour les éléments HTML marqués d'un ID spécifique. L'élément est sélectionné en fonction de l'ID d'élément, qui est unique, ce qui signifie que le même identifiant ne peut apparaître qu'une seule fois dans la même page de document;

Tel que:

#demoDiv{
color:#FF0000;
}

Sélecteur de classe (. + Nom de classe) : Le sélecteur de classe est sélectionné en fonction du nom de la classe, et est marqué par "." Devant;

Tel que:

.demoDiv{
color:blue;
}

Sélecteur universel (sélectionner tous les éléments) : le sélecteur universel est représenté par *;
comme:

* {
color:green;
font-size: 12px;
}

Sélecteur de groupe : lorsque plusieurs éléments ont les mêmes attributs de style, vous pouvez appeler une déclaration ensemble, séparés par des virgules; par
exemple:

p,h1,span{
color:red;
line-height:20px;
}

#main p, #sider span {
color:#000;
line-height:26px;
}

L'utilisation du sélecteur de groupe simplifiera grandement le code CSS. Combinez plusieurs éléments avec les mêmes attributs pour la sélection et définissez les mêmes attributs CSS. Cela améliore considérablement l'efficacité du codage et réduit la quantité de fichiers CSS. Volume.

Sélecteur de hiérarchie

Sélecteur d'enfant (utilisez> divisé entre les éléments): le sélecteur d'enfant (sélecteur d'enfant) fait référence à ses descendants directs, qui peuvent être compris comme le premier descendant agissant sur les éléments enfants;
tels que:

p>span{
color:red;
}

Sélecteur de descendant (séparé par un espace entre les éléments): utilisé pour sélectionner les descendants d'un élément ou groupe d'éléments spécifique, placer la sélection de l'élément parent au premier plan et la sélection des éléments enfants au dos, séparés par un espace au milieu,
comme:

section span{
color:blue;
}

La différence entre
le sélecteur enfant et le sélecteur descendant: 1) Le sélecteur enfant (sélecteur enfant) se réfère uniquement à ses descendants directs, et les sélecteurs descendants agissent sur tous les éléments descendants enfants;
2) Les sélecteurs enfants sont effectués via ">" Select, et les sélecteurs descendants utilisent espaces à sélectionner;

Sélecteur Brother (séparé par + entre les éléments): En plus du sous-sélecteur ci-dessus et du sélecteur descendant, nous pouvons également vouloir trouver l'un des deux frères, comme un élément d'en-tête h1 suivi de deux éléments de paragraphe p, Nous voulons localisez l'élément p du premier paragraphe et appliquez-lui des styles. Nous pouvons utiliser le sélecteur de frère adjacent;
tel que:

h1 + p {
color:blue;
}

Sélecteur de pseudo-classe

Les pseudo-classes peuvent être appliquées aux balises de lien, ainsi qu'à certains éléments de formulaire, mais l'application des éléments de formulaire n'est pas prise en charge par IE, donc généralement les pseudo-classes ne seront appliquées qu'aux styles de lien.

Sélecteur de pseudo-classe dynamique
L'ordre d'écriture des pseudo-sélecteurs dynamiques:
1) le lien et la visite doivent être placés en premier (pas d'ordre, sélecteur de pseudo-classe statique);
2) le lien et la visite ne peuvent être utilisés que pour un tag;
3) le lien Et visité est le focus
4) le focus est survolé;
5) le survol est actif;
Sélecteur de pseudo-classe structurelle
premier enfant: le premier élément.
last-child: le dernier élément.
nth-child (n): Si vous voulez sélectionner le numéro d'un certain élément, n prend la valeur.
nth-child (-n + m): La valeur initiale de n des m premiers éléments sélectionnés est 0.
nth-of-type (n): Sélectionnez le nième élément.
nth-last-child (n): Sélectionnez le nième élément à partir du bas.
Sélecteur de pseudo-classe négatif
Nom de l'élément: not (n) En plus d'un certain élément, d'autres éléments ajoutent des styles

Sélecteur de pseudo éléments:

Tous les sélecteurs de pseudo-élément doivent être placés à la fin du sélecteur où le pseudo-élément apparaît, ce qui signifie que le sélecteur de pseudo-élément ne peut être suivi d'aucun sélecteur dérivé;

: première lettre, définissez le style de première lettre de l'élément de bloc, la conversion des éléments en ligne en éléments de bloc et en éléments de bloc en ligne est également prise en charge;

div p:first-letter {
font-size: 20px
}
//选择div元素里所有的p元素的第一个字母或汉字;

: première ligne: définit le style de la première ligne de texte;

.box .main:first-line {
color: #f00
} 
　//只有部分属性允许first-line：所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height

: avant: définissez le style précédent, vous pouvez insérer le contenu généré et définir son style;

body:before {
content: 'The Start:'; 
display: block;
}
//在body元素前插入文本内容'The Start:'，并设置其为块元素

: après: après avoir défini le style, vous pouvez insérer le contenu généré et définir son style; par
exemple:

body:after {
content: 'The End.';
display: block;
}
//在body元素最后插入文本内容'The End.'，并设置其为块元素

input :: - webkit-input-placeholder (modifier le style d'information d'invite de la zone de saisie)

Sélecteur d'attribut

La correspondance est basée sur l'attribut de l'élément, et son attribut peut être un attribut standard ou un attribut personnalisé; il peut également correspondre à plusieurs attributs en même temps;

Format: nom d'élément [nom d'attribut + "valeur d'attribut"]

input[type=“text”]

Format: nom de l'élément [nom de l'attribut ^ = contenu commençant par la valeur de l'attribut]
sélectionnez l'élément commençant par XXX

input[type^=“te”]+span{ 
color:red;
}

Format: nom de l'élément [nom de l'attribut $ = contenu se terminant à la valeur de l'attribut]
sélectionnez l'élément se terminant par XXX

input[type $ =“d”]+span{
 color:blue;
}

Format: nom de l'élément [nom de l'attribut * = contenu contenu dans la valeur de l'attribut]
sélectionnez l'élément qui contient XXX

input[type*=“i”]+span{ 
color:green;
}

Conclusion: les amis qui veulent apprendre le front-end Web et les amis qui ont besoin d'informations frontales peuvent rejoindre la jupe d'apprentissage ici, devant: 953, milieu: 352, et enfin: 883, il y en a tous des blancs aux grands. la jupe, ainsi que des informations d'apprentissage front-end, des questions d'entrevue frontale, des fichiers PDF, libres de partager, de voir ou de quitter!