Lassen Sie uns über mehrere Selektoren in CSS sprechen

Heute geht es in diesem Artikel hauptsächlich um mehrere Selektoren in CSS. Freunde, die es brauchen, können darauf verweisen.

1. Wildcard-Selektor

Der Wildcard-Selektor wird durch das „*“-Symbol dargestellt und kann mit dem Inhalt übereinstimmen der Seite. Alle Elemente

/*设置当前页面中所有标签的颜色为红色*/* {color: red;
}

2. Tag-Selektor

Der Tag-Selektor wählt Tags mit demselben Namen auf der aktuellen Seite aus

/*设置所有p标签的文字颜色为红色*/p {color: red;
}

3. ID-Selektor

Der ID-Selektor wird durch „#“ identifiziert, gefolgt vom ID-Namen

{:;
}

Dies ist der Titel

Beachten Sie, dass der Attributwert der ID im HTML-Tag auf einer Seite eindeutig sein muss (es handelt sich eher um eine W3C-Spezifikation als um eine strenge Regel).

Namenskonvention für ID-Selektoren

• Nur ​​Buchstaben (Groß- und Kleinschreibung, strikte Unterscheidung), Unterstriche und Zahlen sind zulässig, d. h. id="Head" Kein Konflikt mit id="head"

• Darf nur mit einem Buchstaben beginnen

• Es gibt keine Längenbeschränkung für den Namen kann aus einem Buchstaben bestehen, oder Es gibt viele, aber es wird nicht empfohlen, zu lang zu sein

• Tag-Namen sind nicht erlaubt (keine feste Regel)

4、类选择器

类选择器就是选取页面中所有标签的class属性值相同的一类标签，用.（点）表示 

{:;
}

这是标题1

这是标题2

 一个标签可以包含多个类选择器，在class标签中用空格隔开。

.head {color: blue;
}.subHead {font-size: 50px;
}

这是标题2

 5、复合选择器

5.1、交集选择器

交集选择器又称标签指定式选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如

h3.special  /* 需要满足标签是h3同时拥有special类 */

或

p#one /* 需要满足标签是p同时id为one */

 5.2、并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式

/*同时给标签h3与class为box的元素设置样式*/h3, .box {color: red;font-size: 14px;
}

 5.3、后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代（后代不仅仅包括儿子，还包括子子孙孙）。

Das obige ist der detaillierte Inhalt vonLassen Sie uns über mehrere Selektoren in CSS sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!