Detaillierte Erläuterung der Verwendung des CSS-Selektors

Dieses Mal werde ich Ihnen die Verwendung von CSS Selector ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS Selector? Hier ist ein praktischer Fall.

Der in CSS1 definierte Selektor

Typselektor

wird verwendet, um den angegebenen Typ auszuwählen Element (eigentlich ist es der HTML- Tag-Selektor ), die allgemeine Verwendung ist wie folgt:

body {
    /*对 body 元素定义样式*/
}
body,p {
    /*同时选择多种标签元素*/
}

ID-Selektor

wird verwendet Auswählen und Angeben Die übliche Verwendung von ID-HTML-Elementen ist wie folgt:

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

Da die Renderreihenfolge von CSS von rechts nach links verläuft und ID völlig eindeutig ist, können Sie das vorherige Typauswahlgerät weglassen.

Der Klassenselektor

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

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

enthält Auswahl Das

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 sich nicht um die Ebene kümmert , solange der folgende Selektor Es kann im vorherigen Element enthalten sein. Wie im obigen Beispiel werden beide Navigationstools vom Selektor ausgewählt!

Pseudoklassenselektor

:link - Pseudoklassenselektor verknüpfen

Zu definieren Der Stil eines Links, wenn er nicht besucht wird. Übliche Verwendungsmethoden sind wie folgt:

<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 – der Link-Pseudoklassenselektor

wird verwendet Um den Stil des besuchten Links zu definieren, lauten die üblichen Verwendungsmethoden wie folgt:

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

:active – Benutzeroperations-Pseudoklassenselektor

wird verwendet, um den zu definieren Aktivierter Elementstil, gängige Verwendungsmethoden sind wie folgt:

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

:hover – Pseudoklassenselektor für Benutzeroperationen

wird verwendet, um den Stil des Elements zu definieren Wenn die Maus darüber fährt, wie folgt:

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

:focus – Der Pseudoklassenselektor

wird verwendet, um den Stil von zu definieren Elemente, die den Fokus erhalten, sind wie folgt:

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

::first-line

wird verwendet, um den Stil der ersten Textzeile zu definieren innerhalb des Elements. Übliche Verwendungsmethoden sind 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 den Stil des ersten Zeichens innerhalb des Elements zu definieren Übliche Verwendungsmethoden sind wie folgt:

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

CSS2-Selektoren definiert in

* – Platzhalterselektor

wird verwendet, um gemeinsame Stile für alle Elemente im DOM zu definieren. Allgemeine Verwendungsmethoden wie folgt:

<p class="nav">
    <p>
        <p class="nav-tools">
        
        </p>
    </p>
</p>
<style>
    .nav * {
        margin: 0;
    }
</style>

Wenn Sie den Standardstil zurücksetzen möchten, wird die Verwendung von nicht empfohlen Platzhalterselektor

[Attribut]——Attributselektor

wird verwendet, um den Stil von Elementen zu definieren, die Attribute enthalten 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"] - Attributselektor

wird verwendet, um den Wert eines Elementattributs als einen angegebenen Wertestil zu definieren Die Verwendungsmethoden lauten wie folgt:

<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"]——Attribut Der Selektor

wird verwendet, um Attribute zu definieren, die bestimmte Werte enthalten ​und Attributwertelemente durch Leerzeichen trennen. Übliche 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, wird nur die erste Vordergrundfarbe von li als Rot definiert!

[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

用于定义属性为 lang=“en” 的元素样式，常见使用方法如下：

<p>
    <p lang="en">Hello World</p>
</p>
<style>
    p:lang(en) {
        color: red;
    }
</style>

::before

用于定义元素之前的内容和样式，常见使用方法如下：

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

::after

用于定义元素之后的内容和样式，常见使用方法如下：

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

p > 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>

h1 + p

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

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

CSS3 新增属性选择器

[foo^="bar"]

用于定义元素属性以 bar 开头的元素的样式

<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>

如上所示，标记 https 链接为绿色。

[foo$="bar"]

用于定义元素属性以 bar 结尾的元素的样式

<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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

你不知道的冷门CSS属性

href和src、link和@import有什么区别

css的绝对定位怎么兼容所有的分辨率

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des CSS-Selektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!