Maison >interface Web >tutoriel CSS >Apprentissage des sélecteurs CSS : parlons des sélecteurs composés (introduction détaillée)
Cet article vous donnera une introduction détaillée au sélecteur composite en CSS. Découvrez le sélecteur d'intersection, le sélecteur composite d'union, le sélecteur hiérarchique, le sélecteur de pseudo-classe et de pseudo-élément et le sélecteur d'attribut en CSS.
Également connu sous le nom de sélecteur spécifique aux balises
Fonction : Sélectionnez le contenu qui correspond à deux balises en même temps
Format : 1. Par deux Composition du sélecteur, le premier est le sélecteur d'étiquette, le second est le sélecteur de classe ou le sélecteur d'identifiant ; 2. Il ne peut y avoir d'espace entre les deux sélecteurs
div.student{ color: red; }
virgule Connecté
p.slogn,.teacher,#gy{ font-family: "宋体"; }
1. Composeur d'éléments descendants
#yuGong .people{ color: red; }
tous les descendants du peuple se teindront les cheveux , y compris le fils, le petit-fils, l'arrière-petit-fils de Yu Gong...
2. Sélecteur composite d'élément enfant
#yuGong>.people{ color: red; }
fils du peuple Yugong dans les descendants se teindront les cheveux. Le petit-fils et l'arrière-petit-fils de Yugong ne se teignent pas les cheveux car ils sont encore jeunes Seuls les éléments enfants (fils biologiques) seront sélectionnés ici.
3. Sélecteur de frères proches
le même père, et le deuxième élément doit suivrele premier élément
#secondBaby+#thirdBaby{ color: red; }
4. Sélecteur de frères et sœurs ordinaires
le même parent, mais le deuxième élément n'est pas obligé de suivre le premier élément.
#bigBaby~#thirdBaby{ color: red; }
0. Qu'est-ce que "pseudo" ?
1.
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}
a:focus{...}
: N'inversez pas l'ordre des pseudo-classes , suivez l'ordre link-visited-hover -Active, sinon des erreurs peuvent survenir
2.
Fonction : Utilisé pour créer des éléments qui ne sont pas dans l'arborescence du document et leur ajouter des styles.
选择器 | 作用 | 格式 |
---|---|---|
::first-letter | 选取选择器的首字母 | p::first-letter |
::first-line | 选取选择器的首行 | p::first-line |
::before | 在选择器前增加内容,使用 content 属性来指定要插入的内容。(被插入的内容实际上不在文档树中) | p::before{content: "hello ";} |
::after | 在选择器后增加内容,使用 content 属性来指定要插入的内容。(被插入的内容实际上不在文档树中) | p::after{content: "hello ";} |
::selection | 匹配被用户选中或者处于高亮状态的部分 | p::selection |
选择器 | 作用 | 格式 |
---|---|---|
E[att^=value] | 表示E标签的att属性值是以’value’开头的 | p[id^=‘yuan’]{color: red;} |
E[att$=value] | 表示E标签的att属性值是以’value’结尾的 | p[id$=‘chao’]{ color: blue;} |
E[att*=value] | 表示E标签的att属性值中包含’value’字符串 | p[class*=‘shi’]{font-size: 35px;} |
Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !
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!