CSS-Selektoren

CSS selector is a pattern used to match elements in an HTML document. Associated style rules will be applied to elements that match the selector pattern.

What is a selector

Selector is one of the most important aspects of CSS, as they are used to select elements on a webpage to set styles. Selectors can be defined in multiple ways.

General selector

General selector (using*Asterisk or asterisk indicates) matching each individual element on the page. If there are other conditions on the target element, the general selector can be omitted. This selector is usually used to remove default margins and padding from elements for quick testing.

*　{
　　　　margin: 0;
　　　　padding: 0;
　　}

*选择器内的样式规则将应用于文档中的每个元素。

元素类型选择器

元素类型选择器将文档树中元素的每个示例与相应的元素类型名称进行匹配。

p {
　　　　color: blue;
　　}

p选择器中的样式规则将应用于<p>文档中的每个元素，并使其颜色为蓝色，无论它们在文档树中的位置如何。

ID选择器

id选择器用于为单个或唯一元素定义样式规则。

ID选择器的定义是一个井号（#），后跟ID值。

#error {
　　　　color: red;}

此样式规则将id属性设置为的元素文本呈现为红色error。

class类选择器

类选择器可用于选择具有class属性的任何HTML元素。具有该类的所有元素将根据定义的规则进行格式化。

用一个句号（.）紧随其后的类值定义类选择器。

.blue {
　　　　color: blue;
　　　　　　}

以上样式规则将class属性中设置为的文档中每个元素的文本显示为蓝色blue。您可以使其更加具体。例如：

p.blue {
　　　　color: blue;
　　　　}

选择器中的样式规则p.blue仅<p>将class属性设置为的那些元素呈现为蓝色blue，而对其他段落没有影响。

后代选择器

当需要选择一个元素是另一个元素的后代时，可以使用这些选择器。例如，如果您只想定位无序列表中包含的那些定位点，而不要定位所有定位点元素。

ul.menu li a {
　　　　text-decoration: none;
　　　　}
h1　em {
　　　　color: green;
　　　　}

选择器内的样式规则ul.menu li anur für<a>包含在具有class的无序列表内的那些即锚元素.menu，并且对文档内的其他链接没有影响。同样，h1 em选择器内的样式规则仅适用于<em>heading内包含的元素<h1>。

子选择器

子选择器只能用于选择作为某些元素的直接子元素的那些元素。子选择器由两个或多个选择器组成，两个选择器之间用大于号（即>）分隔。例如，您可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素的第一级。

ul > li {
　　　　list-style: square;
　　　　}
ul > li ol {
　　　　list-style: none;
　　　　}

选择器内的样式规则ul > linur für<li>als<ul>die direkten Kindelemente der Elemente und hat keinen Einfluss auf andere Listenelemente.

Der benachbarte Brüder-Selector

Der benachbarte Gleichkammer-Selector kann zur Auswahl gleichkammerhafter Elemente verwendet werden. Die Syntax des Selectors ähnelt: E1 + E2, wo E2ist das Ziel des Selectors.

h1 + pDie Selector im folgenden Beispiel<p>nur<h1>und<p>Element im Dokumentbaum denselben übergeordneten Elternteil teilt und<h1>direkt daran anschließende<p>wird nur dann das Element ausgewählt, wenn es sich vor dem Element befindet. Dies bedeutet, dass nur jeder<h1>Die Absätze nach dem Titel haben nur die damit verbundenen Styleregeln.

h1　+　p {
　　　　color: blue;
　　　　font-size:　18px;
　　　　}
ul.task　+　p {
　　　　color: #f0f;
　　　　text-indent:　30px;
　　　　}

Der universelle Brüder-Selector

Der universelle Gleichkammer-Selector im Vergleich zum benachbarten Gleichkammer-Selector (E1 + E2）ähnlich, aber nicht so streng. Der universelle Gleichkammer-Selector besteht aus zwei einfachen Selectoren, die durch einen Schrägstrich (〜） durch einen Zeichensatz getrennt sind. Es kann so geschrieben werden: E1〜E2, wo E2ist das Ziel des Selectors.

Der Selector im folgenden Beispielh1 ~ pwird dieser<p>vor dem Element<h1>Alle Elemente, bei denen alle Elemente im Dokumentbaum den gleichen übergeordneten Elternteil teilen.

h1　~ p {
　　　　color: blue;
　　　　font-size:　18px;
　　　　}
ul.task ~ p {
　　　　color: #f0f;
　　　　text-indent:　30px;
　　　　}

Es gibt noch mehr Auswahler, wie z.B. Attributauswahl, Pseudo-Klassen, Pseudo-Elemente. Wir werden diese Auswahler in den kommenden Kapiteln besprechen.

Gruppierungsauswahl

Mehrere Auswahlerklärer in der Stylus können gleiche Styleregeln teilen. Sie können sie zu einer durch Kommas getrennten Liste gruppieren, um den Code in der Stylus so gering wie möglich zu halten. Es kann auch verhindern, dass Sie die gleichen Styleregeln mehrmals wiederholen.

h1　{
　　　　font-size:　36px;
　　　　font-weight: normal;
　　　}
h2　{
　　　　font-size:　28px;
　　　　font-weight: normal;
　　　}
h3　{
　　　　font-size:　22px;
　　　　font-weight: normal;
　　　}

wie Sie im obigen Beispiel sehen können, die gleichen Styleregelnfont-weight: normal;wird durch gemeinsame Auswahl geteilth1,h2undh3Daher kann es in eine durch Kommas getrennte Liste aufgeteilt werden, wie folgt:

h1, normal;2, normal;3　{font-weight: normal;}
h1　{font-size:　36px;}
h2　{font-size:　28px;}
h3　{font-size:　22px;}