Maison > Article > interface Web > Tri des sélecteurs CSS et pseudo-classes et pseudo-objets

Tri des sélecteurs CSS et pseudo-classes et pseudo-objets

高洛峰original: 2017-02-09 11:17:342560parcourir

Organisation du sélecteur CSS

1 Wildcard *
```
   *{
           margin: 0;
           padding: 0;
       }
```
Fonction : Définissez les correctifs internes et externes de tous les éléments de la page à 0 ; >
```
   .class * {
       color:#ffffff;
   }
```
Définissez la couleur de police de tous les éléments de la classe sur blanc
2. Sélecteur de balises

        p,
        p,
        a,
        span,
        h1 {
            color: #FFFFFF;
        }

HTML comporte de nombreuses balises et vous pouvez directement utiliser des sélecteurs de balises pour leur ajouter des styles. Cependant, les sélecteurs de balises et les caractères génériques ont une large plage de sélection, il est donc recommandé de les utiliser avec d'autres sélecteurs.

3. Sélecteur de classe
Dans la page, on peut ajouter un attribut à l'étiquette, classe-classe, personnaliser un nom de classe, tel que
, puis je Nous pouvons utiliser des sélecteurs de classe en CSS pour ajouter les attributs souhaités à cette classe. 
```
       .myClass{
           color: #FFFFFF;
       }
```
4. Sélecteur d'identifiant
Le sélecteur d'identifiant est quelque peu similaire au sélecteur de classe

```
       #myClass{
           color: #FFFFFF;
       }
```
est précédé d'un préfixe #. , différent de la classe, l'identifiant ne peut apparaître qu'une seule fois en HTML. Peut-être comprenez-vous le caractère unique de l'identifiant, mais vous avez écrit deux p avec la même classe et le même identifiant. Cependant, j'ai constaté que lors de l'ajout de styles à l'aide d'ID, les styles normaux apparaissaient avec succès pour les deux ID et aucune erreur n'était signalée. Cependant, le même identifiant entraînera des erreurs dans le jugement des langages de script tels que JavaScript. Il n'est peut-être pas possible d'expliquer que le sélecteur d'identifiant puisse ajouter des styles à deux p identiques, mais regardez le portail ici Pour faire simple, c'est un principe, tout comme un pays a ses lois (fautes de frappe volontaires, je'). J'ai peur d'être attrapé par le système) Bouclier) Vous ne pouvez pas enfreindre la loi, sinon nous ne vous tolérerons pas. [1]
5. Sélecteur d'inclusion
Le sélecteur d'inclusion peut également être appelé sélecteur dérivé ou sélecteur descendant, car il agit sur les éléments enfants d'un élément.
```
    .class1 span{
       
   }
```
6. Le sous-sélecteur
est utilisé pour définir le style des objets sous-éléments. Les objets autres que les sous-éléments ne peuvent pas être définis. (C'est ce que dit le livre) Je souhaite ajouter un mot pour définir le style de l'objet élément enfant direct d'un élément. Par exemple, je suis propriétaire d’une propriété, mais elle ne peut être donnée qu’à mon fils, pas à mon petit-fils. Par exemple, je n'ai pas de maison. J'ai fondu en larmes.
Ajoutez un symbole '>' directement à l'élément parent et aux éléments enfants.

     .class1 > span{
        
    }

7. Le sélecteur adjacent
correspond à l'élément suivant d'un élément sous le même parent.
(Ici, je veux demander pourquoi on l'appelle sélecteur adjacent puisqu'il s'agit de l'élément suivant. Les éléments adjacents ne sont-ils pas adjacents les uns aux autres ? Il vaut mieux l'appeler sélecteur de niveau inférieur. Hahaha, je plaisante.) Adjacent les éléments sont directement connectés avec le symbole « ».

    .myClass + p{
        color: red;
    }

8. Sélecteur d'attribut

Toute balise HTML aura des attributs, et chaque attribut a une valeur d'attribut par exemple :

<p class="myClass" id="zz" style="color: #FFFFFF;"></p>

Le sélecteur d'attribut est divisé en sept (4 3) modes :

1.E[attr]

   p[class] {
       color: #FFFFFF;
   }
   --具有class属性的p字体颜色白色（忽略attr的值）;

2.E[attr="value "]

   p[class="myClass"] {
       color: #FFFFFF;
   }
   --class的值为'myClass'的p字体颜色白色;

3.E[attr~="value"]

   p[class~="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素
   ex:
   <p class="myClass zz"></p>
   <p class="myClass cc"></p>

4.E[attr|="value"]

   p[class|="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。
   ex:
   <p class="myClass-zz"></p>
   <p class="myClass-cc"></p>

5. E[attr^="value"]

   p[class^="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。
   ex:
   <p class="myClasszz"></p>
   <p class="myClasscc"></p>

6.E[attr$="value"]

   p[class$="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。
   ex:
   <p class="zzmyClass"></p>
   <p class="ccmyClass"></p>

7.E[attr*="value "]

   p[class*="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值含有value的E标签元素。
   ex:
   <p class="myClass-zz"></p>
   <p class="myClass-cc"></p>

9. Combinaisons de sélecteurs
Le plus grand avantage des sélecteurs n'est pas qu'ils peuvent écrire des styles pour un certain élément ou un certain type d'élément, mais ils ont été combinés pour différentes structures de pages. Diverses combinaisons.
Ce que je dois mentionner, c'est le nombre de niveaux d'imbrication des combinaisons de sélecteurs. Bien qu'il n'y ait pas de réglementation directe sur le nombre de niveaux d'imbrication qui ne peuvent pas être dépassés, l'imbrication d'un trop grand nombre de niveaux peut facilement produire du code indésirable et n'est pas propice à l'inclusion.
10. Poids du sélecteur CSS
Divisez la spécificité en 4 niveaux, chaque niveau représente un type de sélecteur, et la valeur de chaque niveau est la sélection qu'il représente. Les sélecteurs sont multipliés par le poids de ce niveau, et enfin les valeurs de tous les niveaux sont additionnées pour obtenir la valeur spéciale du sélecteur.

Les quatre niveaux sont définis comme suit :

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如p p，权值为1。
PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。

Lors de l'utilisation d'une combinaison CSS, le poids est égal à la somme des poids de chaque couche.

ex:
    .myClass #zz h1 {
        color: #FFFFFF;
    }
权值为： 10 + 100 + 1 = 111 ;

11. Pseudo-classes et sélecteurs de pseudo-objets

Pseudo-classes courantes :

   :link:指示为超链接（既有一个href属性），并指向一个未访问地址的所有锚。
   :visited:指示作为已访问地址超链接的所有锚。
   :focus:指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素。
   :hover:指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上
   :active:指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。
   :first-letter:设置对象内的第一个字符的样式表属性。 
   :first-line:设置对象内的第一行的样式表属性。 
   :first-child:设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。 
   :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 
   :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 
   :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 
   :lang:设置对象使用特殊语言的内容样式表属性。

Pseudo-classes structurelles :

   E:nth-child(n):匹配父元素中的第n个子元素E。
   E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。
   E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
   E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
   E:last-child:匹配父元素中最后一个E元素。
   E:first-of-type:匹配同级兄弟元素中的第一个E元素。
   E:only-child:匹配属于父元素中唯一子元素的E。
   E:only-of-type:匹配属于同类型中唯一兄弟元素的E。
   E:empty:匹配没有任何子元素（包括text节点）的元素E。

Pseudo-classe de statut d'élément d'interface utilisateur :

   E:checked:匹配所有用户界面（form表单）中处于选中状态的元素E
   E:enabled:匹配所有用户界面（form表单）中处于可用状态的E元素
   E:disabled:匹配所有用户界面（form表单）中处于不可用状态的E元素
   E:selection:匹配E元素中被用户选中或处于高亮状态的部分

Pseudo-classe de négation :

    E:not(s):匹配所有不匹配简单选择符s的元素E

Pseudo-classe cible :

   E:target:匹配相关URL指向的E元素

Sélecteur d'élément Brother général :

   E ~ F:匹配E元素之后的F元素

Pseudo-objet :

   :before用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
   :after用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

Remarque : Cet article fait référence à "Ces choses sur le CSS" et manuel de référence css2/css3. Cela ne représente que mon opinion personnelle, veuillez me corriger s'il y a quelque chose qui ne va pas ou qui est inapproprié. Veuillez indiquer la source lors de la réimpression, merci pour votre coopération !

Organisation du sélecteur CSS

1 Wildcard *
```
   *{
           margin: 0;
           padding: 0;
       }
```
Fonction : Combiner tous les caractères sur. la page Définissez les patchs intérieurs et extérieurs de l'élément sur 0
```
   .class * {
       color:#ffffff;
   }
```
Définissez la couleur de police de tous les éléments sous la classe sur blanc
2; . Le sélecteur de balises

        p,
        p,
        a,
        span,
        h1 {
            color: #FFFFFF;
        }

html a de nombreuses balises, vous pouvez directement utiliser les sélecteurs de balises pour leur ajouter des styles, mais la plage de sélection des sélecteurs de balises et des caractères génériques. est très grand, il est recommandé de coopérer avec d'autres sélecteurs d'utilisation ensemble.

三、类选择符
在页面中，我们可以给标签加上一个属性，class-类，自定义一个类名，比如，然后我就可以在css中用类选择符给这个类加上我们想要的属性。
```
       .myClass{
           color: #FFFFFF;
       }
```
四、id选择符
id选择符与类选择符有点相似
```
       #myClass{
           color: #FFFFFF;
       }
```
前面是一个 # 的前缀，与class不同的是，id在html中只允许出现一次，可能你明白id的唯一性，但是你写了两个p，相同class、id。却发现用id添加样式的时候，两个id都成功出现了正常样式且没有报错。但是相同id会导致JavaScript等脚本语言判断错误。这么说可能无法解释好id选择符可以给两个相同p添加样式，但是看这里传送门，简单点说，这就是个原则，就好像一个国家有它的法率（故意错别字，我怕被系统屏蔽）你不能违反法率，否则就容不下你。[1]
五、包含选择符
包含选择符也可以叫派生选择符或后代选择器，因为作用是在某元素的子元素上。
```
    .class1 span{
       
   }
```
六、子选择符
作用是定义子元素对象的样式，无法定义子元素以外的对象。（书上是这么说的）我想加个词，定义某元素的直接子元素对象的样式。打个比方，我有一处房产，但是只能给我儿子，不能给我孙子。打个比方哈，我没有房子。/泪崩。
父元素子元素直接加个'>'符号。

     .class1 > span{
        
    }

七、相邻选择符
匹配同一个父级下某元素的下一个元素。
（这里我想问问既然是下一个元素为什么要叫相邻选择符，相邻不是前后左右相邻吗，叫下级选择符好了，哈哈哈，开个玩笑。）相邻元素直接用'+'符号连接。

    .myClass + p{
        color: red;
    }

八、属性选择符
任何一个HTML标签都会有属性存在，且每个属性都具有属性值；比如：

<p class="myClass" id="zz" style="color: #FFFFFF;"></p>

属性选择符分为七（4+3）种模式：

1.E[attr]

   p[class] {
       color: #FFFFFF;
   }
   --具有class属性的p字体颜色白色（忽略attr的值）;

2.E[attr="value"]

   p[class="myClass"] {
       color: #FFFFFF;
   }
   --class的值为'myClass'的p字体颜色白色;

3.E[attr~="value"]

   p[class~="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素
   ex:
   <p class="myClass zz"></p>
   <p class="myClass cc"></p>

4.E[attr|="value"]

   p[class|="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。
   ex:
   <p class="myClass-zz"></p>
   <p class="myClass-cc"></p>

5.E[attr^="value"]

   p[class^="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。
   ex:
   <p class="myClasszz"></p>
   <p class="myClasscc"></p>

6.E[attr$="value"]

   p[class$="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。
   ex:
   <p class="zzmyClass"></p>
   <p class="ccmyClass"></p>

7.E[attr*="value"]

   p[class*="myClass"] {
       background-color: #000000;
       color: #fff;
   }--匹配具有'attr'属性且属性值含有value的E标签元素。
   ex:
   <p class="myClass-zz"></p>
   <p class="myClass-cc"></p>

九、选择符组合
选择符最大的优势不是可以给某元素或某类元素书写样式，而已针对不同的页面结构组合成各种组合。
不得不提的就是选择符组合的嵌套层数，虽然没有哪里直接规定嵌套层数不能超过多少，但是，嵌套过多层数容易产生垃圾代码也不利于收录会。
十、css选择符权重
把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如p p，权值为1。
PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。

使用css组合的时候，权值等于每一层的权值相加。

ex:
    .myClass #zz h1 {
        color: #FFFFFF;
    }
权值为： 10 + 100 + 1 = 111 ;

十一、伪类、伪对象选择符

常见伪类：

   :link:指示为超链接（既有一个href属性），并指向一个未访问地址的所有锚。
   :visited:指示作为已访问地址超链接的所有锚。
   :focus:指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素。
   :hover:指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上
   :active:指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。
   :first-letter:设置对象内的第一个字符的样式表属性。 
   :first-line:设置对象内的第一行的样式表属性。 
   :first-child:设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。 
   :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 
   :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 
   :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 
   :lang:设置对象使用特殊语言的内容样式表属性。

结构性伪类：

   E:nth-child(n):匹配父元素中的第n个子元素E。
   E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。
   E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
   E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
   E:last-child:匹配父元素中最后一个E元素。
   E:first-of-type:匹配同级兄弟元素中的第一个E元素。
   E:only-child:匹配属于父元素中唯一子元素的E。
   E:only-of-type:匹配属于同类型中唯一兄弟元素的E。
   E:empty:匹配没有任何子元素（包括text节点）的元素E。

UI元素状态伪类:

   E:checked:匹配所有用户界面（form表单）中处于选中状态的元素E
   E:enabled:匹配所有用户界面（form表单）中处于可用状态的E元素
   E:disabled:匹配所有用户界面（form表单）中处于不可用状态的E元素
   E:selection:匹配E元素中被用户选中或处于高亮状态的部分

否定伪类:

    E:not(s):匹配所有不匹配简单选择符s的元素E

目标伪类:

   E:target:匹配相关URL指向的E元素

通用兄弟元素选择器:

   E ~ F:匹配E元素之后的F元素

伪对象：

   :before用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
   :after用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

更多css选择符整理及伪类、伪对象相关文章请关注PHP中文网！

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Réalisez la rotation du cube 3D en faisant glisser la souris sur la base de la nouvelle transformation d'attribut CSS3 et du js natifArticle suivant：Réalisez la rotation du cube 3D en faisant glisser la souris sur la base de la nouvelle transformation d'attribut CSS3 et du js natif

Articles Liés

Voir plus