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
| 选择器 | 名称 | 描述 |
|---|---|---|
* |
通配选择器 | 选择所有的元素 |
E |
元素选择器 | 选择指定的元素 |
#idName |
id选择器 | 选择id属性等于idName的元素 |
.className |
class选择器 | 选择class属性包含className的元素 |
Der Inhalt dieses Abschnitts ist sehr einfach und es gibt nichts Besonderes zu sagen. CSS
| 选择器 | 名称 | 描述 |
|---|---|---|
E F |
包含选择器 | 选择所有包含在E元素里面的F元素 |
E>F |
子选择器 | 选择所有作为E元素的子元素F |
E+F |
相邻选择器 | 选择紧贴在E元素之后的F元素 |
E~F |
兄弟选择器 | 选择E元素所有兄弟元素F |
zusammen mit dem Geschwisterselektor verwendet wird. Überprüfen Sie die Details. :checked
| 选择器 | 描述 |
|---|---|
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
| 选择器 | 名称 | 描述 |
|---|---|---|
* |
通配选择器 | 选择所有的元素 |
E |
元素选择器 | 选择指定的元素 |
#idName |
id选择器 | 选择id属性等于idName的元素 |
.className |
class选择器 | 选择class属性包含className的元素 |
Der Inhalt dieses Abschnitts ist sehr einfach und es gibt nichts Besonderes zu sagen. CSS
| 选择器 | 名称 | 描述 |
|---|---|---|
E F |
包含选择器 | 选择所有包含在E元素里面的F元素 |
E>F |
子选择器 | 选择所有作为E元素的子元素F |
E+F |
相邻选择器 | 选择紧贴在E元素之后的F元素 |
E~F |
兄弟选择器 | 选择E元素所有兄弟元素F |
zusammen mit dem Geschwisterselektor verwendet wird. Überprüfen Sie die Details. :checked
| 选择器 | 描述 |
|---|---|
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
:not() li:not(:last-child) {
border-bottom: 1px solid #ddd;
}:nth-child() 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) /*表示奇数*/
:...-child:...-of-type
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()
:empty
p:empty
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 |
设置元素被选择时的字体颜色和背景颜色 |
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
und :before, auf die später in einem separaten Artikel eingegangen wird. :after
Welche Arten von CSS-Selektoren gibt es?
So öffnen Sie die Win11-Systemsteuerung
So erstellen Sie HTML mit Webstorm
Douyin kann keine Videos herunterladen und speichern
Verwendung der Sortierfunktion c++sort
Was ist besser, zuerst zu lernen, C-Sprache oder C++?
Spleißverwendung
Lösung für verstümmelte Zeichen beim Öffnen von Excel
