Detaillierte Einführung in CSS Selector

In diesem Artikel werden hauptsächlich die relevanten Informationen zum CSS-Selektor in den CSS-Studiennotizen vorgestellt. Freunde, die sie benötigen, können sich auf

Der in CSS1 definierte Selektor beziehen

Typselektor

wird verwendet, um Elemente eines bestimmten Typs auszuwählen (eigentlich ist es der HTML-Tag-Selektor). folgt:

body {
    /*对 body 元素定义样式*/
}

body,p {
    /*同时选择多种标签元素*/
}

ID-Selektor

wird verwendet, um HTML-Elemente mit angegebenen IDs auszuwählen:

<p id="nav">
    
</p>

<style>
    #nav {
        /*定义 ID 为 nav 的元素的样式*/
    }
</style>

Aufgrund von CSS ist die Renderreihenfolge von rechts nach links und die ID ist völlig eindeutig, sodass der vorherige Typselektor weggelassen werden kann.

Der Klassenselektor

wird verwendet, um HTML-Elemente mit angegebenen Klassennamen auszuwählen:

<p class="nav">
    
</p>

<style>
    .nav {
        /*定义 class 为 nav 的元素的样式*/
    }
</style>

enthält Auswahl Der Selektor

wird verwendet, um hierarchisch verschachtelte Elemente auszuwählen:

<p class="nav">
    <p class="nav-tools">
        
    </p>
</p>

<p class="nav">
    <p>
        <p class="nav-tools">
        
        </p>
    </p>
</p>

<style>
    .nav .nav-tools {
        /*定义元素的父级元素 class 包含 nav，且子元素class 包含 nav-tools 的元素*/
    }
</style>

Es ist zu beachten, dass der enthaltende Selektor dies tut Die Ebene ist egal, solange der folgende Selektor im vorherigen Element enthalten ist. Wie im obigen Beispiel werden beide Navigationstools vom Selektor ausgewählt!

Pseudoklassenselektor

:link——Pseudoklassenselektor verknüpfen

wird verwendet, um den Stil zu definieren, wenn der Link nicht besucht wird:

<p class="nav">
    <p class="nav-tools">
        <ul>
            <li><a href="#"></a></li>
        </ul>
    </p>
</p>

<style>
    a:link {
        text-decoration: none;
        color: blue;
    }
</style>

:visited – Link-Pseudoklassenselektor

wird verwendet, um den Stil des besuchten Links zu definieren:

<style>
    a:visited {
        text-decoration: none;
        color: red;
    }
</style>

:active – Pseudoklassenselektor für Benutzeroperationen

Wird verwendet, um den aktivierten Elementstil zu definieren:

<style>
    a:active {
        text-decoration: none;
        color: green;
    }
</style>

:hover – Pseudoklassenselektor für Benutzeroperationen

wird verwendet Um die Maus nach dem Stil des Elements zu definieren, lauten die allgemeinen Verwendungsmethoden wie folgt:

<style>
    a:hover {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>

:focus - Benutzeroperation Pseudoklassenselektor

ist Wird verwendet, um den Stil des Elements zu definieren, das den Fokus erhält. Die allgemeine Verwendung lautet wie folgt:

<style>
    input:focus {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>

::first-line

wird verwendet, um das zu definieren Der Stil der ersten Textzeile innerhalb des Elements ist wie folgt:

<p class="doc">
    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</p>

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-line {
        color: red;
    }
</style>

::=first-letter

wird verwendet, um das zu definieren Der Stil des ersten Zeichens im Element ist wie folgt:

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-letter {
        font-size: 2em;
        color: red;
    }
</style>

In CSS2 definierte Selektoren

* - Platzhalterselektoren

werden verwendet. Definieren Sie den gemeinsamen Stil für alle Elemente im DOM:

<p class="nav">
    <p>
        <p class="nav-tools">
        
        </p>
    </p>
</p>

<style>
    .nav * {
        margin: 0;
    }
</style>

Wenn Sie zurücksetzen möchten Im Standardstil wird die Verwendung des Platzhalter-Selektors

[Attribut] ——Attribut-Selektor

nicht empfohlen Definieren Sie den Stil von Elementen, die Attribute enthalten. Gängige Verwendungsmethoden sind wie folgt:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active>Menu</li>
                <li>Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li[active] {
        color: red;
    }
</style>

[attribute="value"]——Attributauswahl

wird verwendet Um den Wert des Elementattributs als angegebenen Wertstil zu definieren, sind folgende übliche Verwendungsmethoden:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="active">Menu</li>
                <li active>Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li[active="active"] {
        color: red;
    }
</style>

[attribute~="value"] - Attributselektor

wird verwendet, um Attribute zu definieren, die bestimmte Werte enthalten, und Attributwertelemente durch Leerzeichen zu trennen:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li[active~="active"] {
        color: red;
    }
</style>

Wie oben gezeigt, wird nur die Vordergrundfarbe des ersten Li verwendet als rot definiert werden!

[attribute|="value"] - Der Attributselektor

wird verwendet, um Attributwerte zu definieren, die den angegebenen Wert enthalten und durch einen Bindestrich verknüpft sind (- ) , gängige Verwendungsmethoden sind wie folgt:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li[active|="active"] {
        color: red;
    }
</style>

Wie oben gezeigt: Nur die Vordergrundfarbe des zweiten Li wird als Rot definiert!

:first-child——struktureller Pseudoklassenselektor

wird verwendet, um den Stil des ersten Elements des Elements zu definieren:

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    li:first-child {
        color: red;
    }
</style>

Hinweis: First-Child ist das erste Element, das auf derselben Ebene agiert und denselben Tag hat. Wie oben gezeigt, müssen Sie, wenn Sie den Stil des ersten li definieren möchten, li:first-child anstelle von ul:first-child!

:lang(en) verwenden

wird verwendet, um den Elementstil mit dem Attribut lang="en" zu definieren. Übliche Verwendungsmethoden sind wie folgt:

<p>
    <p lang="en">Hello World</p>
</p>

<style>
    p:lang(en) {
        color: red;
    }
</style>

::before

wird verwendet. Definieren Sie den Inhalt und Stil vor dem Element. Übliche Verwendungsmethoden sind wie folgt:

<p>
    <a>World</a>
</p>

<style>
    a::before {
        content: "Hello ";
    }
</style>

::after

wird zum Definieren des Inhalts verwendet und Stil nach dem Element Wie folgt:

<p>
    <a>Hello</a>
</p>

<style>
    a::after {
        content: "World";
    }
</style>

p > wird verwendet, um den Stil des Unter-Elements der ersten Ebene zu definieren. Element des Elements. Die übliche Methode ist wie folgt:

h1 + p

<p class="nav">
    <p>
        <p class="nav-tools">
            <ul>
                <li active="test active">Menu</li>
                <li active="active-test">Index</li>
            </ul>
        </p>
    </p>
</p>

<style>
    .nav-tools > ul {
        background-color: red;
    }
    .nav-tools > li {
        /*这个不会生效，因为 li 不是 ul 的直接子元素*/
    }
</style>

wird verwendet, um den Stil von Elementen neben Elementen zu definieren Die Methoden lauten wie folgt:

<p>
    <h1>CSS</h1>
    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
</p>

<style>
    h1 + p {
        color: red;
    }
</style>

CSS3 Neuer Attributselektor

[foo^="bar"]

wird verwendet, um Elemente zu definieren, deren Elementattribute mit bar beginnen. Der oben gezeigte Stil von

markiert https-Links grün.

<p>
    <a href="http://www.betterde.com">Betterde Inc.</a>
    <a href="https://www.betterde.com">Betterde Inc.</a>
</p>

<style>
    a[href^="https"] {
        color:green;
    }
</style>

[foo$="bar"]

wird verwendet, um den Stil von Elementen zu definieren, deren Elementattribute mit bar enden

as Wie oben gezeigt, identifiziert das verlinkte Dateiformat eines Hyperlinks und fügt davor ein Dateitypsymbol hinzu!

<p>
    <a href="http://www.betterde.com/logo.png">logo.png</a>
    <a href="http://www.betterde.com/style.css">style.css</a>
    <a href="http://www.betterde.com/main.js">main.js</a>
</p>

<style>
    a[href$="png"] {
        background: url(system/filetype/png.png) no-repeat left center;
        padding-left: 18px;
    }
    
    a[href$="css"] {
        background: url(system/filetype/css.png) no-repeat left center;
        padding-left: 18px;
    }
    
    a[href$="js"] {
        background: url(system/filetype/js.png) no-repeat left center;
        padding-left: 18px;
    }
</style>

[foo*="bar"]

用于定义元素属性中包含 bar 的元素的样式，需要注意的是，这里是包含，也就是说无论是什么样的组合，只要属性值还有这bar 这三个连续字母的都会被选中！

<p>
    <h1 class="title big full-right"></h1>
    <h2 class="title big full-right"></h1>
    <h1 class="big-title"></h1>
</p>
<style>
    a[class*="title"] {
        color: red;
    }
</style>

如上所示：p 内的三个元素都将会被渲染为红色字体！

虽然 CSS3 中任然保留 CSS2 中定义的属性选择器，但是建议使用 CSS3 的属性选择器来替代！

结构伪类选择器

:root

用于定义 html 标签元素的样式

:nth-child(n)

用于定义子元素的样式，n 表示第几个子元素。n 可以是数字，或关键字odd、even或公式。常见使用方法如下：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:nth-child(even) {
        background-color: red; 
    }
</style>

:nth-last-child(n)

与 :nth-child(n)用法相同，只是排序方式是从后往前！

:nth-of-type(n)

用于定义相同元素的第 n 个元素的样式，常见使用方法如下：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:nth-of-type(even) {
        background-color: red; 
    }
</style>

:nth-last-of-type(n)

与 :nth-of-type(n)用法相同，只是排序方式是从后往前！

:last-child

用于定义最后一个元素的样式，常见使用方法如下：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:last-child {
        background-color: red; 
    }
</style>

:first-of-type

定义第一个元素相同类型元素的样式，与 :nth-of-type(1) 效果一样

:last-of-type

定义最后一个元素相同类型元素的样式，常见使用方法如下：

<table>
    <tbody>
        <tr>
            <td>name</td>
            <td>gender</td>
            <td>age</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Male</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Kevin</td>
            <td>Male</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Angule</td>
            <td>Male</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

<style>
    tr:last-of-type {
        background-color: red; 
    }
</style>

:only-child

用于定义子元素只有一个且与制定元素标签相同，常见使用方法如下：

<p>
    <h1>Hello</h1>
</p>

<style>
    h1:only-child {
        /*如果 p 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
    }
</style>

:only-of-type

用于定义只包含一个制定的标签元素的样式，常见使用方法如下：

<p>
    <h1>Hello</h1>
</p>

<style>
    h1:only-of-type {
        /*如果 p 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
    }
</style>

:empty

用于定义，一个元素中没有包含任何子元素的样式，常见使用方法如下：

<p>
    
</p>

<style>
    p:empty {
        display: none;
    }
</style>

CSS3 新增的其他选择器

E ~ F

用于定义兄弟元素的样式，常见使用方法如下：

<p>
    <p>Hello</p>
</p>
<p>CSS</p>

<style>
    p ~ p {
        color: red;
    }
</style>

p 元素中的 p 不会被渲染为红色字体，只有跟 p 是同级的 p 才会被渲染为红色！

:not(s)

用于定义指定元素，并且过滤 s 所指定的选择器元素，常见使用方法如下：

<p>
    <p class="red">Hello</p>
    <p class="blue">World</p>
    <p>Welcome!</p>
</p>

<style>
    p:not(.red) {
        color: blue;
    }
</style>

注意：s 是一个简单的结构选择器，不能使用复合选择器，该选择器只匹配第一个复合条件的元素。如上所示，最后一个 p 不会被渲染为蓝色！

:target

用于定义被访问的锚链样式，常见使用方法如下：

<p>
    <p id="text-one">
        <p>这是第一个文本段</p>
    </p>
    <p id="text-two">
        <p>这是第二个文本段</p>
    </p>
</p>

<style>
    p:target {
        color: red;
    }
</style>

注意：当我们激活锚链时（url中包含 #text-one 或 #text-two），对应的 p 内的元素字体会被渲染为红色！

CSS3 UI 元素状态伪类选择器

:enabled

用于定义元素的 enabled 时的样式，常见使用方式如下：

<p>
    <input type="text">
</p>

<style>
    input:enabled {
        background: #ffff00;
    }
</style>

注意：元素默认状态为 enabled

:disabled

用于定义元素处于禁用状态时的样式，常见使用方法如下：

<p>
    <input type="text" disabled="disabled"/>
</p>

<style>
    input:disabled {
        background: #dddddd;
    }
</style>

:checked

用于定义元素被选中时的样式，常见使用方式如下：

<p>
    <form>
        <input type="checkbox" />
    </form>
</p>

<style>
    input:checked {
        color: green;
    }
</style>

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS Selector. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!