Explication détaillée du sélecteur CSS Selector

Pour utiliser CSS afin d'obtenir un contrôle un à un, un à plusieurs ou plusieurs à un des éléments d'une page HTML, vous devez utiliser des sélecteurs CSS. Les éléments des pages HTML sont contrôlés via des sélecteurs CSS. Cet article présente principalement les informations pertinentes du sélecteur CSS dans les notes d'étude CSS. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Le sélecteur défini en CSS1

sélecteur de type

est utilisé pour sélectionner des éléments d'un type spécifié (en fait, il s'agit d'un sélecteur de balise html). comme suit :

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

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

Le sélecteur d'ID

est utilisé pour sélectionner l'élément html avec l'ID spécifié. L'utilisation courante est la suivante :

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

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

Parce que le. l'ordre de rendu du CSS va de la droite. Le rendu est effectué vers la gauche et l'ID est complètement unique, le sélecteur de type précédent peut donc être omis.

Le sélecteur de classe

est utilisé pour sélectionner des éléments HTML avec des noms de classe spécifiés. Les méthodes d'utilisation courantes sont les suivantes :

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

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

Contient le sélecteur

<.> Utilisé pour sélectionner des éléments imbriqués hiérarchiquement. Les méthodes d'utilisation courantes sont les suivantes :

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

Il est à noter que le sélecteur d'inclusion ne se soucie pas du niveau, tant que le sélecteur suivant est inclus dans le élément précédent C'est tout. Comme dans l'exemple ci-dessus, les deux outils de navigation seront sélectionnés par le sélecteur !

Sélecteur de pseudo-classe

:link——Le sélecteur de pseudo-classe de lien

est utilisé pour définir le style lorsque le lien n'est pas visité. Usage courant. Les méthodes sont les suivantes :

<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 - le sélecteur de pseudo-classe de lien

est utilisé pour définir le style de lien visité. Les méthodes d'utilisation courantes sont les suivantes :

 : actif ——Le sélecteur de pseudo-classe d'opération utilisateur

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

est utilisé pour définir le style d'élément activé. Les méthodes d'utilisation courantes sont les suivantes :

:hover——Utilisateur. le sélecteur de pseudo-classe d'opération

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

est utilisé pour définir le style de l'élément lorsque la souris passe dessus. Les méthodes d'utilisation courantes sont les suivantes :

:focus - pseudo-opération utilisateur. Le sélecteur de classe

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

est utilisé pour définir le style de l'élément. Les méthodes d'utilisation courantes sont les suivantes :

::first-line

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

est utilisé pour définir le style d'élément. style de la première ligne de texte dans l'élément. Les méthodes d'utilisation courantes sont les suivantes :

::=first-letter

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

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

est utilisé pour définir le style du premier caractère dans l'élément. Les méthodes d'utilisation courantes sont les suivantes :

Sélecteur défini en CSS2

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

* - le sélecteur générique

est utilisé pour définir des styles communs à tous. éléments dans le DOM. Les méthodes d'utilisation courantes sont les suivantes :

Si vous souhaitez réinitialiser les styles par défaut, il n'est pas recommandé d'utiliser le sélecteur de caractère générique

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

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

[attribut] - le sélecteur d'attribut

est utilisé pour définir le style des éléments contenant des attributs avec des attributs. Les méthodes d'utilisation courantes sont les suivantes :

[attribute="value"]—— Le sélecteur d'attribut

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

est utilisé pour définir la valeur de l'attribut d'élément en tant que style de valeur spécifié. Les méthodes d'utilisation courantes sont les suivantes :

[attribute~="value"]——Attribut. le sélecteur

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

est utilisé pour définir des attributs qui contiennent des valeurs spécifiées et séparer les éléments de valeur d'attribut avec des espaces. Les méthodes d'utilisation courantes sont les suivantes :

Comme indiqué ci-dessus, seule la couleur de premier plan. du premier li sera défini comme rouge !

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

[attribute|="value"] - Le sélecteur d'attribut

est utilisé pour définir les valeurs d'attribut qui contiennent la valeur spécifiée et sont liées par un trait d'union (-). comme suit :

Comme indiqué ci-dessus : seule la couleur de premier plan du deuxième li sera définie comme rouge !

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

:first-child——le sélecteur de pseudo-classe structurelle

est utilisé pour définir le style du premier élément de l'élément. Les méthodes d'utilisation courantes sont les suivantes :

.

Remarque :first-child agit sur le premier élément du même niveau et avec le même tag. Comme indiqué ci-dessus, si vous souhaitez définir le style du premier li, vous devez utiliser li:first-child au lieu de ul:first-child !

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

:lang(fr)

Pour définir le style de l'élément avec l'attribut lang="en", les méthodes d'utilisation courantes sont les suivantes :

::before

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

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

est utilisé pour définir le contenu et le style avant l'élément. Les méthodes d'utilisation courantes sont les suivantes :

::after

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

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

est utilisé pour définir le contenu et le style après l'élément. Les méthodes d'utilisation courantes sont les suivantes :

.

p > p

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

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

est utilisé pour définir le style du sous-élément de premier niveau d'un élément. La méthode courante est la suivante :

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>

est utilisé pour définir le style des éléments adjacents à l'élément. Les méthodes courantes sont les suivantes : L'utilisation est la suivante :

Sélecteur de nouveau attribut CSS3

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

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

[foo^="bar"]

est utilisé pour définir les attributs d'un élément commençant par bar. Le style de l'élément

est comme indiqué ci-dessus, en marquant les liens https en vert .

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

Utilisé pour définir le style des éléments dont les attributs d'élément se terminent par bar

Comme indiqué ci-dessus, identifiez les hyperliens liés formats de fichiers et ajoutez une icône de type de fichier devant !

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

est utilisé pour définir le style de l'élément contenant bar dans l'attribut element. Il est à noter que cela est inclus, ce qui signifie quoi qu'il arrive. c'est une Combinaison, tant que la valeur de l'attribut et les trois lettres consécutives de la barre seront sélectionnées !

Comme indiqué ci-dessus : les trois éléments contenus dans p seront tous rendus en police rouge !

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

Bien que CSS3 conserve toujours les sélecteurs d'attributs définis dans CSS2, il est recommandé d'utiliser plutôt les sélecteurs d'attributs CSS3 !

Sélecteur de pseudo-classe de structure

:root

Utilisé pour définir le style des éléments de balise html

:nth-child(n)

Utilisé pour définir le style des sous-éléments, n représente le sous-élément. n peut être un nombre, ou le mot-clé impair, pair ou une formule. Les méthodes d'utilisation courantes sont les suivantes :

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

相关推荐：

CSS选择器中带点(.)的解决办法

Css选择器

关于css选择器的那些事

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!