suchen

Heim >Web-Frontend >CSS-Tutorial >Der CSS-Selektor wird aufgeräumt

Der CSS-Selektor wird aufgeräumt

高洛峰
高洛峰Original
2017-02-09 11:23:321698Durchsuche

Viele Leute denken, dass CSS sehr einfach ist, aber tatsächlich ist es nicht einfach, CSS gut zu schreiben. Nehmen Sie den Selektor als Beispiel, den CSS Selektor kann wahrscheinlich in fünf Kategorien unterteilt werden: CSS

  • Elementselektor

  • Beziehungsselektor

  • Attributselektor

  • Pseudoklassenselektor

  • Pseudoobjektselektor

Elementselektor

Der

选择器 名称 描述
* 通配选择器 选择所有的元素
E 元素选择器 选择指定的元素
#idName id选择器 选择id属性等于idName的元素
.className class选择器 选择class属性包含className的元素
Der Elementselektor wird häufig verwendet, solange er geschrieben ist

Der Inhalt dieses Abschnitts ist sehr einfach und es gibt nichts Besonderes zu sagen. CSS

Beziehungsauswahl

选择器 名称 描述
E F 包含选择器 选择所有包含在E元素里面的F元素
E>F 子选择器 选择所有作为E元素的子元素F
E+F 相邻选择器 选择紧贴在E元素之后的F元素
E~F 兄弟选择器 选择E元素所有兄弟元素F
Ein paar Punkte, die Sie hier beachten sollten:

  • Die Kinderauswahl kann nur Wortelemente auswählen, keine Enkelkinder; Die Einbeziehung Der Selektor wählt alle qualifizierten Nachkommen aus, einschließlich Söhnen, Enkeln, Enkelkindern ...

  • Der benachbarte Selektor wählt nur benachbarte Elemente aus, die die Bedingungen erfüllen. Geschwisterelemente; der Geschwisterselektor wählt alle aus Geschwisterelemente, die die Bedingungen erfüllen, nicht unbedingt benachbarte Elemente.

  • In Android Browser4.2.* und niedriger tritt ein Fehler auf, wenn der Pseudoklassenselektor

    zusammen mit dem Geschwisterselektor verwendet wird. Überprüfen Sie die Details. :checked

Attributauswahl

Pseudoklassenselektor

选择器 描述
E:link 设置超链接a在未被访问前的样式
E:visited 设置超链接a在其链接地址已被访问过时的样式
E:hover 设置元素鼠标在其悬停时的样式
E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
E:focus 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。(一般应用于表单元素)
E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled 匹配用户界面上处于可用状态的元素E。(一般应用于表单元素)
E:disabled 匹配用户界面上处于禁用状态的元素E。(一般应用于表单元素)
E:empty 匹配没有任何子元素（包括text节点）的元素E
E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
E:not(s) 匹配不含有s选择符的元素E
E:first-child 匹配父元素的第一个子元素E
E:last-child 匹配父元素的最后一个子元素E
E:only-child 匹配父元素仅有的一个子元素E
E:nth-child(n) 匹配父元素的第n个子元素E
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
E:first-of-type 匹配同类型中的第一个同级兄弟元素E
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

注意事项：

  • 超链接的4种状态(访问前，鼠标悬停，当前被点击，已访问)，需要有特定的书写顺序才能生效；a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。

  • E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

关于:not()的用法

假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。

 li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线。是不是很方便。

关于:nth-child()的用法

要使E:nth-child(n)生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。
nth-child(n)括号里的n可以是一个数字，一个关键字，或者一个公式。

:nth-child(length) /*参数是具体数字 length为整数*/
:nth-child(n) /*参数是n,n从0开始计算*/
:nth-child(n*length) /*n的倍数选择，n从0开始算*/
:nth-child(n+length) /*选择大于等于length后面的元素*/
:nth-child(-n+length) /*选择小于等于length前面的元素*/
:nth-child(n*length+1) /*表示隔几选一*/
:nth-child(2n) / :nth-child(even) /*表示偶数*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

关于:...-child和:...-of-type的差异

这两个系列的属性确实很相似，对于不熟悉的人可能很难区分。

E:first-of-type 总是能命中父元素的第1个为E的子元素，不论父元素第1个子元素是否为E；而E:first-child里的E元素必须是它的兄弟元素中的第一个元素，否则匹配失效。E:last-of-type 与E:last-child也是同理。
E:nth-of-type(n)总是能命中父元素的第n个为E的子元素，不论父元素第n个子元素是否为E；而E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
关于:nth-child()与:nth-of-type()的区别可以看这篇文章

用:empty区分空元素

选择不包含子元素的p元素：

p:empty

选择包含子元素的p元素：

p:not(:empty)

伪对象选择器

选择器 描述
E:before/E::before 在目标元素E的前面插入的内容。用来和content属性一起使用
E:after/E::after 在目标元素E的后面插入的内容。用来和content属性一起使用
E:first-letter/E::first-letter 设置元素内的第一个字符的样式
E:first-line/E::first-line 设置元素内的第一行的样式
E::placeholder 设置元素文字占位符的样式。(一般用于input输入框)
E::selection 设置元素被选择时的字体颜色和背景颜色

注意事项：

  • ::placeholder在使用时需要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

总结

选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲，比如:before和:after，后面专门写一篇文章来说。


Viele Leute denken, dass CSS sehr einfach ist, aber tatsächlich ist es nicht einfach, CSS gut zu schreiben. Nehmen Sie den Selektor als Beispiel, den CSS Selektor kann wahrscheinlich in fünf Kategorien unterteilt werden: CSS

  • Elementselektor

  • Beziehungsselektor

  • Attributselektor

  • Pseudoklassenselektor

  • Pseudoobjektselektor

Elementselektor

Der

选择器 名称 描述
* 通配选择器 选择所有的元素
E 元素选择器 选择指定的元素
#idName id选择器 选择id属性等于idName的元素
.className class选择器 选择class属性包含className的元素
Der Elementselektor wird häufig verwendet, solange er geschrieben ist

Der Inhalt dieses Abschnitts ist sehr einfach und es gibt nichts Besonderes zu sagen. CSS

Beziehungsauswahl

选择器 名称 描述
E F 包含选择器 选择所有包含在E元素里面的F元素
E>F 子选择器 选择所有作为E元素的子元素F
E+F 相邻选择器 选择紧贴在E元素之后的F元素
E~F 兄弟选择器 选择E元素所有兄弟元素F
Ein paar Punkte, die Sie hier beachten sollten:

  • Die Kinderauswahl kann nur Wortelemente auswählen, keine Enkelkinder; Die Einbeziehung Der Selektor wählt alle qualifizierten Nachkommen aus, einschließlich Söhnen, Enkeln, Enkelkindern ...

  • Der benachbarte Selektor wählt nur benachbarte Elemente aus, die die Bedingungen erfüllen. Geschwisterelemente; der Geschwisterselektor wählt alle aus Geschwisterelemente, die die Bedingungen erfüllen, nicht unbedingt benachbarte Elemente.

  • In Android Browser4.2.* und niedriger tritt ein Fehler auf, wenn der Pseudoklassenselektor

    zusammen mit dem Geschwisterselektor verwendet wird. Überprüfen Sie die Details. :checked

Attributauswahl

Pseudoklassenselektor

选择器 描述
E:link 设置超链接a在未被访问前的样式
E:visited 设置超链接a在其链接地址已被访问过时的样式
E:hover 设置元素鼠标在其悬停时的样式
E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
E:focus 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。(一般应用于表单元素)
E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled 匹配用户界面上处于可用状态的元素E。(一般应用于表单元素)
E:disabled 匹配用户界面上处于禁用状态的元素E。(一般应用于表单元素)
E:empty 匹配没有任何子元素（包括text节点）的元素E
E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
E:not(s) 匹配不含有s选择符的元素E
E:first-child 匹配父元素的第一个子元素E
E:last-child 匹配父元素的最后一个子元素E
E:only-child 匹配父元素仅有的一个子元素E
E:nth-child(n) 匹配父元素的第n个子元素E
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
E:first-of-type 匹配同类型中的第一个同级兄弟元素E
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

Hinweis:

  • Die 4 Zustände von Hyperlinks (vor dem Zugriff, Mauszeiger, aktuell angeklickt, besucht) erfordern eine bestimmte Schreibreihenfolge, um wirksam zu werden; nach a:link und a:visited stehen, a:active muss nach a:hover stehen.

  • Selektor, E muss das erste Element unter seinen Geschwisterelementen sein, mit anderen Worten, E muss das erste untergeordnete Element des übergeordneten Elements sein. Eine ähnliche Pseudoklasse ist E:first-child, aber die Situation ist genau umgekehrt, sie muss das letzte untergeordnete Element sein. E:last-child

Über die Verwendung von

:not()

Angenommen, es gibt eine Liste, jedes Listenelement hat ein Endergebnis, aber das letzte Element benötigt kein Endergebnis. 

 li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
Der obige Code bedeutet: Fügen Sie allen Listenelementen außer dem letzten Element in der Liste eine Endzeile hinzu. Ist das nicht sehr praktisch?

Über die Verwendung von

:nth-child()

Damit

wirksam wird, muss das E-Element ein untergeordnetes Element eines bestimmten Elements sein und das höchste übergeordnete Element von E ist body, Das heißt, E kann ein untergeordnetes Element des Körpers sein. Das Gleiche gilt für E:nth-child(n), :first-child, :last-child und :only-child. :nth-last-child(n)
Das n in den Klammern kann eine Zahl, ein Schlüsselwort oder eine Formel sein. nth-child(n)

:nth-child(length) /*参数是具体数字 length为整数*/
:nth-child(n) /*参数是n,n从0开始计算*/
:nth-child(n*length) /*n的倍数选择，n从0开始算*/
:nth-child(n+length) /*选择大于等于length后面的元素*/
:nth-child(-n+length) /*选择小于等于length前面的元素*/
:nth-child(n*length+1) /*表示隔几选一*/
:nth-child(2n) / :nth-child(even) /*表示偶数*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇数*/
Über die Unterschiede zwischen

und :...-child:...-of-type

Die Eigenschaften dieser beiden Serien sind tatsächlich sehr ähnlich, und es kann schwierig sein, sie für diejenigen zu unterscheiden, bei denen dies nicht der Fall ist mit ihnen vertraut.

kann immer das erste untergeordnete Element des übergeordneten Elements treffen, das E ist, unabhängig davon, ob das erste untergeordnete Element des übergeordneten Elements E ist und das E-Element in E:first-of-type muss sei es Das erste Element unter den Geschwisterelementen, sonst schlägt die Übereinstimmung fehl. Das Gleiche gilt für E:first-child und E:last-of-type . E:last-child
kann immer das n-te untergeordnete Element des übergeordneten Elements treffen, das E ist, unabhängig davon, ob das n-te untergeordnete Element des übergeordneten Elements E ist, und E:nth-of-type(n) wählt das n-te untergeordnete Element aus Element des übergeordneten Elements E. Wenn das n-te untergeordnete Element nicht E ist, ist es ein ungültiger Selektor, aber n wird erhöht. E:nth-child(n)Für den Unterschied zwischen
und :nth-child() können Sie diesen Artikel lesen. :nth-of-type()

Verwenden Sie

, um leere Elemente zu unterscheiden. :empty

Wählen Sie p-Elemente aus, die nicht enthalten Unterelemente: 

p:empty
Wählen Sie p-Elemente aus, die untergeordnete Elemente enthalten: 

p:not(:empty)
Pseudoobjektselektor

选择器 描述
E:before/E::before 在目标元素E的前面插入的内容。用来和content属性一起使用
E:after/E::after 在目标元素E的后面插入的内容。用来和content属性一起使用
E:first-letter/E::first-letter 设置元素内的第一个字符的样式
E:first-line/E::first-line 设置元素内的第一行的样式
E::placeholder 设置元素文字占位符的样式。(一般用于input输入框)
E::selection 设置元素被选择时的字体颜色和背景颜色
Hinweise:

  • muss bei der Verwendung mit dem Präfix jedes Browsers hinzugefügt werden, mit Ausnahme von Firefox, bei dem es sich um ::placeholder handelt. Andere Browser verwenden ::[prefix]placeholder. ::[prefix]input-placeholder

Zusammenfassung

Eine gute Verwendung von Selektoren kann uns tatsächlich eine Menge Code ersparen. Tatsächlich gibt es noch einige Dinge, die nicht im Detail besprochen wurden, wie zum Beispiel

und :before, auf die später in einem separaten Artikel eingegangen wird. :after

Weitere Artikel zur CSS-Selektororganisation finden Sie auf der chinesischen PHP-Website!

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：Detaillierte Erläuterung der Verwendung von User-Select in CSS3Nächster Artikel：Detaillierte Erläuterung der Verwendung von User-Select in CSS3

In Verbindung stehende Artikel

Mehr sehen