Nicht im Lieferumfang enthalten. Zu den CSS-Selektoren gehören: 1. Tag-Selektor, der bestimmte HTML-Elemente anhand des Elementnamens der HTML-Seite findet; 2. Klassen-Selektor, der bestimmte HTML-Elemente anhand des Werts des Klassenattributs des HTML-Elements findet; welche bestimmte HTML-Elemente über den Wert des id-Attributs des HTML-Elements lokalisieren. 4. Der Platzhalter-Selektor „*“ kann auf alle Arten von Tag-Elementen verweisen, einschließlich benutzerdefinierter Elemente. 5. Der Attribut-Selektor verwendet den vorhandenen Attributnamen des HTML-Element oder Attributwert zum Auffinden bestimmter HTML-Elemente.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS-Selektoren enthalten keine „Hypertext-Tag-Selektoren“, sondern Klassenselektoren, Tag-Selektoren, ID-Selektoren, Attributselektoren, Pseudoklassenselektoren usw.
css Was ist ein Selektor? Stil ist die kleinste Syntaxeinheit von CSS. Jeder Stil besteht aus zwei Teilen: Selektor und Deklaration (Regel), wie in der Abbildung unten gezeigt.
1. Selektor (Selektor) 
Der Selektor besteht aus der ID des HTML-Elements, dem Klassenattribut oder dem Elementnamen selbst und einigen speziellen Symbolen, die verwendet werden, um anzugeben, für welches HTML-Element der Stil definiert werden soll , wie zum Beispiel „Selektor p“ bedeutet, Stile für alle
-Tags auf der Seite zu definieren Wähler. Alle Deklarationen werden in einem Paar geschweifter Klammern { direkt nach dem Selektor platziert. Eine Anweisung muss zwei Teile enthalten: Attribute und Attributwerte, und ein Semikolon muss verwendet werden, um das Ende einer Anweisung zu markieren. Bei der letzten Anweisung in einem Stil kann das Semikolon weggelassen werden.
Attribut: Der Stilname, den Sie für das HTML-Element festlegen möchten, bestehend aus einer Reihe von Schlüsselwörtern, wie z. B. Farbe, Rahmen, Schriftart (Schriftart). ) usw. CSS bietet viele Attribute, die Sie auf der offiziellen W3C-Website anzeigen können.
Wert: besteht aus einem numerischen Wert und einer Einheit oder einem Schlüsselwort, mit dem der Anzeigeeffekt eines bestimmten Werts gesteuert wird Der Wert des Farbattributs kann beispielsweise Rot oder #F1F1F1 usw. sein.
{ }内，然后整体紧邻选择器的后面。
声明必须包括两部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。
属性：您希望给 HTML 元素设置的样式名称，由一系列关键词组成，例如 color（颜色）、border（边框）、font（字体）等，CSS 中提供了众多属性，您可以通过 W3C 官网查看；
值：由数值和单位或者关键字组成，用来控制某个属性的显示效果，例如 color 属性的值可以是 red 或 #F1F1F1 等。
css选择器有哪些？
我们从一个Html结构开始
<div id="box">
<div class="one">
<p class="one_1">
</p >
<p class="one_1">
</p >
</div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</div>关于css常用的选择器有：
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
还有一些使用频率相对没那么多的选择器：
伪类选择器
:link ：选择未被访问的链接 :visited：选取已被访问的链接 :active：选择活动链接 :hover ：鼠标指针浮动在上面的元素 :focus ：选择具有焦点的 :first-child：父元素的首个子元素
伪元素选择器
:first-letter ：用于选取指定选择器的首字母 :first-line ：选取指定选择器的首行 :before : 选择器在被选元素的内容前面插入内容 :after : 选择器在被选元素的内容后面插入内容
属性选择器
[attribute] 选择带有attribute属性的元素 [attribute=value] 选择所有使用attribute=value的元素 [attribute~=value] 选择attribute属性包含value的元素 [attribute|=value]：选择attribute属性以value开头的元素
在CSS3中新增的选择器有如下：
层次选择器（p~ul），选择前面有p元素的每个ul元素
伪类选择器
:first-of-type 表示一组同级元素中其类型的第一个元素 :last-of-type 表示一组同级元素中其类型的最后一个元素 :only-of-type 表示没有同类型兄弟元素的元素 :only-child 表示没有任何兄弟的元素 :nth-child(n) 根据元素在一组同级中的位置匹配元素 :nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数 :last-child 表示一组兄弟元素中的最后一个元素 :root 设置HTML文档 :empty 指定空的元素 :enabled 选择可用元素 :disabled 选择被禁用元素 :checked 选择选中的元素 :not(selector) 选择与 <selector> 不匹配的所有元素
属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素 [attribute^=value]：选择attribute属性开头为value的所有元素 [attribute$=value]：选择attribute属性结尾为value的所有元素
css基本选择器和优先级
css基本选择器
| 选择器名称 | 描述 | |
|---|---|---|
类型选择器/元素选择器 | 又称为 类型选择器，这种基本选择器是通过HTML页面的元素名定位具体HTML元素。如果类型选择器单独使用的话，会定位当前HTML页面中所有该元素名的元素。 | |
| 类选择器 | 是通过HTML元素的class属性的值定位具体HTML元素。这种基本选择器的用法是 .类名 | Wir beginnen mit einer HTML-Struktur|
| Klassenselektor (.one), wählen Sie alle Elemente mit dem Klassennamen eins aus | ||
Descendant Selector (#box div), alle div-Elemente mit der ID innerhalb des Box-Elements auswählen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个demo</title>
<style>
#myid{color:red;}
.myclass1{color:yellow;}
h1,p {color:green;}
</style>
<body>
<h1 style="color: blue;" id="myid">这是一个标题，请查看优先级</h1>
<p id="myid">这是一个段落，请查看优先级</p>
</body>
</head>
</html>Nach dem Login kopieren Nach dem Login kopieren
Selektorname< /th> | Beschreibung | 🎜 | 是一个星号（*），这个选择器是一个特殊的标签选择器，它可以指代所有类型的标签元素，包括自定义元素，以及
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
|
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
