Maison > Article > interface Web > Quels sont les problèmes courants avec les sélecteurs CSS ?
Quels sont les problèmes courants avec les sélecteurs CSS ?
- php中世界最好的语言original
- 2018-03-08 15:51:312802parcourir
Cette fois, je vais vous présenter quelques problèmes courants avec les sélecteurs CSS, et quelles sont les précautions à prendre pour traiter les problèmes courants avec les sélecteurs CSS. Voici des cas pratiques, jetons un coup d'œil.
Quels sont les sélecteurs courants ?
1.Sélecteur de balise
p{ }/Sélectionnez l'élément avec le nom de balise p/
2 Sélecteur de classe
.box{ }/Sélectionnez l'élément avec la classe. name box Element/
3. Sélecteur d'ID
#header{ }/Sélectionnez l'élément avec l'identifiant nommé header/
1.4Sélecteur de caractères génériques
{ }/Sélectionnez tout dans le page Elements/
1.5 Préfixe du sélecteur
div.bd{}/Sélectionner les éléments avec le nom de classe bd et la balise div/
1.6Sélecteur d'attribut
[désactivé] {}/Sélectionner tous les éléments avec l'attribut désactivé*/
Quelle est la priorité du sélecteur ?
! important>Style en ligne>Sélecteur d'ID>Pseudo-classe>Sélecteur d'attribut>Sélecteur de classe>Sélecteur d'élément (type)>Sélecteur universel(*)>Scénarios d'utilisation du navigateur pour personnaliser la
classe et l'identifiant ?
id obtient rapidement les objets tag en fonction du numéro d'identification unique fourni. class place certains styles spécifiques dans une classe de classe. Si vous avez besoin de balises pour ce style, vous pouvez ajouter cette classe.
Pourquoi devez-vous délimiter les espaces de noms appropriés lorsque vous utilisez des sélecteurs CSS ?
Pour éviter la pollution du style.
Que signifient les sélecteurs suivants ?
#header{
}/选择id名为header的元素/
.header{
}/选择class名为header的元素/
.header .logo{
}/选择名为header元素内所有名为logo的元素/
.header.mobile{
}/选择class名为header且为mobile的元素/
.header p, .header h3{
}/选择class名为header内所有的p标签和h3标签/
#header .nav>li{
}/选择祖父元素id名为header内父元素class名为nav的标签下/
#header a:hover{
}/选择祖父元素id名为header内a标签被hover的元素/Listez les sélecteurs de pseudo-classe que vous connaissez
:active ajoute des styles aux éléments activés.
:focus ajoute des styles aux éléments qui ont le focus de saisie au clavier.
:hover Ajoute un style à un élément lorsque la souris le survole.
:link Ajoutez des styles aux liens non visités.
:visited ajoute des styles aux liens visités.
:first-child ajoute des styles au premier élément enfant de l'élément.
:lang ajoute des styles aux éléments avec l'attribut lang spécifié.
Exécutez le code suivant pour analyser la raison du style de sortie.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1
:first-of-type
{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<div class="item2">ct-item2</div>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1:first-of-type{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<p class="item2">ct-item2</p>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html> Quelles sont les fonctions et les différences entre :first-child et :first-of-type ?
:first-child correspond au premier élément enfant d'un élément parent, qui peut soit dit est le premier élément enfant de la structure.
:first-of-type correspond au premier élément enfant du même type sous un élément parent.
Si vous rencontrez une propriété et souhaitez connaître la compatibilité, où pouvez-vous la vérifier
Vérifiez-la sur caniuse.com.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Fonction mathématique de chaîne de tableau JavaScript
Cas d'animation de réponse de clic CSS3 simple
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!