Heim > Artikel > Web-Frontend > CSS-Selektorsortierung und Pseudoklassen und Pseudoobjekte

CSS-Selektorsortierung und Pseudoklassen und Pseudoobjekte

高洛峰Original: 2017-02-09 11:17:342560Durchsuche

CSS-Selektororganisation

1. Platzhalter *
```
   *{
           margin: 0;
           padding: 0;
       }
```
Funktion: Setzen Sie die internen und externen Patches aller Elemente auf der Seite auf 0; >
```
   .class * {
       color:#ffffff;
   }
```
Setzen Sie die Schriftfarbe aller Elemente unter der Klasse auf Weiß
2. Tag-Selektor

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

HTML hat viele Tags und Sie können Tag-Selektoren direkt verwenden, um ihnen Stile hinzuzufügen. Tag-Selektoren und Platzhalter haben jedoch einen großen Auswahlbereich, daher wird empfohlen, sie zusammen mit anderen Selektoren zu verwenden.

3. Klassenauswahl
Auf der Seite können wir der Beschriftung ein Attribut hinzufügen, Klasse-Klasse, einen Klassennamen anpassen, z. B.
, und dann I Wir können Klassenselektoren in CSS verwenden, um dieser Klasse die gewünschten Attribute hinzuzufügen. 
```
       .myClass{
           color: #FFFFFF;
       }
```
4. ID-Selektor
Der ID-Selektor ähnelt in gewisser Weise dem Klassenselektor

```
       #myClass{
           color: #FFFFFF;
       }
```
wird durch ein #-Präfix vorangestellt Im Gegensatz zur Klasse darf die ID nur einmal in HTML vorkommen. Vielleicht verstehen Sie die Einzigartigkeit der ID, aber Sie haben zwei Ps mit derselben Klasse und derselben ID geschrieben. Ich habe jedoch festgestellt, dass beim Hinzufügen von Stilen mithilfe von IDs normale Stile für beide IDs erfolgreich angezeigt wurden und keine Fehler gemeldet wurden. Allerdings führt dieselbe ID zu Fehlern bei der Beurteilung von Skriptsprachen wie JavaScript. Es ist vielleicht nicht möglich zu erklären, dass der ID-Selektor Stile zu zwei identischen Ps hinzufügen kann, aber schauen Sie sich das Portal hier an. Um es einfach auszudrücken: Dies ist ein Prinzip, genau wie ein Land seine Gesetze hat (Tippfehler absichtlich, ich'). Ich habe Angst, vom System erwischt zu werden) Shield) Sie können nicht gegen das Gesetz verstoßen, sonst werden wir Sie nicht dulden. [1]
5. Inklusionsselektor
Der Inklusionsselektor kann auch abgeleiteter Selektor oder Nachkommenselektor genannt werden, da er auf die untergeordneten Elemente eines Elements wirkt.
```
    .class1 span{
       
   }
```
6. Der Unterselektor
wird verwendet, um den Stil von Unterelementobjekten zu definieren. Andere Objekte als Unterelemente können nicht definiert werden. (Das steht im Buch) Ich möchte ein Wort hinzufügen, um den Stil des direkten untergeordneten Elementobjekts eines Elements zu definieren. Ich besitze zum Beispiel eine Immobilie, diese kann aber nur meinem Sohn, nicht meinem Enkel, geschenkt werden. Ich habe zum Beispiel kein Haus. / brach in Tränen aus.
Fügen Sie ein „>“-Symbol direkt zum übergeordneten Element und den untergeordneten Elementen hinzu.

     .class1 > span{
        
    }

7. Angrenzender Selektor
stimmt mit dem nächsten Element eines Elements unter demselben übergeordneten Element überein.
(Hier möchte ich fragen, warum es benachbarter Selektor genannt wird, da es das nächste Element ist. Liegen benachbarte Elemente nicht nebeneinander? Es ist besser, es Selektor niedrigerer Ebene zu nennen. Hahaha, nur ein Scherz.) Angrenzend Elemente werden direkt mit dem Symbol „+“ verbunden.

    .myClass + p{
        color: red;
    }

8. Attributselektor

Jedes HTML-Tag verfügt über Attribute, und jedes Attribut hat einen Attributwert; zum Beispiel:

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

Der Attributselektor ist in sieben (4+3) Modi unterteilt:

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. Selektorkombinationen
Der größte Vorteil von Selektoren besteht nicht darin, dass sie Stile für ein bestimmtes Element oder einen bestimmten Elementtyp schreiben können, sondern dass sie kombiniert werden können für verschiedene Seitenstrukturen in verschiedene Kombinationen.
Was ich erwähnen muss, ist die Anzahl der Verschachtelungsebenen von Selektorkombinationen. Obwohl es keine direkte Regelung gibt, wie viele Verschachtelungsebenen nicht überschritten werden dürfen, kann die Verschachtelung zu vieler Ebenen leicht zu Junk-Code führen und ist der Einbeziehung nicht förderlich.
10. CSS-Selektorgewicht
Teilen Sie die Spezifität in 4 Ebenen ein, jede Ebene stellt einen Selektortyp dar und der Wert jeder Ebene ist die Auswahl, die sie darstellt Selektoren werden mit dem Gewicht dieser Ebene multipliziert und schließlich werden die Werte aller Ebenen addiert, um den speziellen Wert des Selektors zu erhalten.

Die vier Ebenen sind wie folgt definiert:

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

Bei Verwendung einer CSS-Kombination entspricht die Gewichtung der Summe der Gewichte jeder Ebene.

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

11. Pseudoklassen und Pseudoobjektselektoren

Gemeinsame Pseudoklassen:

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

Strukturelle Pseudoklassen:

   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-Elementstatus-Pseudoklasse:

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

Negations-Pseudoklasse:

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

Ziel-Pseudoklasse:

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

Allgemeiner Brother-Elementselektor:

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

Pseudoobjekt:

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

Hinweis: Dieser Artikel bezieht sich auf „Diese Dinge über CSS“ und CSS2/CSS3-Referenzhandbuch. Es stellt nur meine persönliche Meinung dar. Bitte korrigieren Sie mich, wenn etwas falsch oder unangemessen ist. Bitte geben Sie beim Nachdruck die Quelle an, vielen Dank für Ihre Mitarbeit!

CSS-Selektororganisation

1. Platzhalter *
```
   *{
           margin: 0;
           padding: 0;
       }
```
Funktion: Alle Zeichen kombinieren die Seite Setzt die inneren und äußeren Patches des Elements auf 0;
```
   .class * {
       color:#ffffff;
   }
```
Setzt die Schriftfarbe aller Elemente unter der Klasse class auf Weiß
2 . Tag-Selektor

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

HTML hat viele Tags, Sie können Tag-Selektoren direkt verwenden, um ihnen Stile hinzuzufügen, aber der Auswahlbereich von Tag-Selektoren und Platzhaltern ist sehr groß, es wird empfohlen, mit anderen Selektoren zusammenzuarbeiten.

三、类选择符
在页面中，我们可以给标签加上一个属性，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中文网！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Realisieren Sie die 3D-Würfelrotation durch Ziehen mit der Maus basierend auf der neuen CSS3-Attributtransformation und nativem JSNächster Artikel：Realisieren Sie die 3D-Würfelrotation durch Ziehen mit der Maus basierend auf der neuen CSS3-Attributtransformation und nativem JS

In Verbindung stehende Artikel

Mehr sehen