CSS fournit plusieurs sélecteurs composés-Questions et réponses frontales-php.cn

CSS fournit plusieurs sélecteurs composés

醉折花枝作酒筹

Libérer： 2023-01-07 11:43:27

original

3815 Les gens l'ont consulté

CSS propose sept types de sélecteurs composés, à savoir : le sous-sélecteur, le sélecteur adjacent, le sélecteur contenant, l'imbrication de sélecteur multi-niveaux, le sélecteur d'attribut, le pseudo-sélecteur et le sélecteur de pseudo-éléments.

CSS fournit plusieurs sélecteurs composés

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, les sélecteurs peuvent être divisés en sélecteurs de base et sélecteurs composés selon leur type. Les sélecteurs composés sont construits sur des sélecteurs de base et sont formés en combinant des sélecteurs de base. Résumé des quatre sélecteurs CSS de base Le sélecteur de base de CSS est composé d'un seul sélecteur.

Le sélecteur composé peut sélectionner l'élément cible (balise) avec plus de précision et d'efficacité
Le sélecteur composé est composé de deux ou plusieurs sélecteurs de base, combinés de différentes manières
Les sélecteurs composés CSS incluent des sous-sélecteurs , sélecteurs adjacents, sélecteurs contenant, imbrication de sélecteurs multi-niveaux, sélecteurs d'attributs, pseudo-sélecteurs et sélecteurs de pseudo-éléments

1. Sélecteurs descendants

Le sélecteur, également connu sous le nom de sélecteur de confinement, peut sélectionner des éléments enfants à l'intérieur. l'élément parent. La façon de l'écrire est d'écrire l'étiquette extérieure au recto et l'étiquette intérieure au dos, séparées par des espaces. Lorsque les balises sont imbriquées, la balise interne devient le descendant de la balise externe.

Syntaxe

元素1 元素2 { 样式声明 }

Copier après la connexion

La syntaxe ci-dessus signifie sélectionner tous les éléments 2 (descendants) à l'intérieur de l'élément 1.

Remarque

1. L'élément 1 et l'élément 2 sont séparés par un espace

2. L'élément 1 est le parent, l'élément 2 est l'enfant et la sélection finale est l'élément 2

3. est OK Il peut s'agir d'un fils, d'un petit-fils, etc., à condition qu'il soit un descendant de l'élément 1

4. L'élément 1 et l'élément 2 peuvent être n'importe quel sélecteur de base

CSS fournit plusieurs sélecteurs composés

2. Sélecteur enfant

Élément enfant. le sélecteur (sélecteur enfant) ne peut sélectionner que les éléments qui sont l'enfant le plus proche d'un élément. La compréhension simple est de choisir l’élément fils.

Syntaxe

元素1 > 元素2 {样式声明}

Copier après la connexion

Remarque

1. L'élément 1 et l'élément 2 sont séparés par un signe supérieur à

2. la sélection est l'élément 2

3. L'élément 2 doit être un fils biologique, et ses petits-enfants et arrière-petits-enfants ne sont pas sous son contrôle. Vous pouvez également l'appeler sélecteur de fils biologique

Exemple

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

Copier après la connexion

.nav a {        /* 后代选择器 */
    color: red;}.nav>a {        /* 子选择器 */
    text-decoration: none;}

Copier après la connexion

CSS fournit plusieurs sélecteurs composés

. Trois. Sélecteur d'union

Le sélecteur d'union peut sélectionner plusieurs groupes de balises et définir le même style pour eux en même temps. Habituellement utilisé pour les déclarations collectives. Le sélecteur d'union est composé de sélecteurs reliés par des virgules anglaises (,). Toute forme de sélecteur peut être utilisée dans le cadre du sélecteur d'union.

Syntaxe

元素1,元素2 {样式声明}

Copier après la connexion

La syntaxe ci-dessus signifie sélectionner l'élément 1 et l'élément 2.

Remarque

1. Les éléments 1 et 2 sont séparés par des virgules

2. Les virgules peuvent être comprises comme la signification de la somme

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪猪侠</li>
    </ul>
</body>

Copier après la connexion

div,p,ul li{
    color: blue;
}

Copier après la connexion

Le sélecteur de pseudo-classe est utilisé pour ajouter des effets spéciaux à certains sélecteurs, comme l'ajout d'effets spéciaux aux liens, ou la sélection du 1er ou du nième élément. La plus grande caractéristique de l'écriture d'un sélecteur de pseudo-classe est qu'elle est exprimée par deux points (:), comme :hover (lorsque la souris passe dessus), :first-child (sélection du premier enfant). Il existe de nombreux sélecteurs de pseudo-classes, tels que les pseudo-classes de lien, les pseudo-classes de structure, etc. Nous résumons d'abord ici les sélecteurs de pseudo-classe de lien couramment utilisés. CSS fournit plusieurs sélecteurs composés

Syntaxe

a: link			/* 选择所有未被访问的链接 */
a: visited	/* 选择所有已经被访问的链接 */
a: hover		/* 选择鼠标指针位于其上的链接 */
a: active		/* 选择活动链接（鼠标按下但未弹起的链接） */

Copier après la connexion

Note

1. Pour garantir l'efficacité, veuillez suivre l'ordre de déclaration du LVHA : lien – visité – survol – actif. Inverser l’ordre peut entraîner un échec.
2. Étant donné que le lien a un style par défaut dans le navigateur, nous devons spécifier le style séparément pour le lien dans le travail réel.

3. Dans le travail réel, il vous suffit d'écrire l'état d'un lien et l'état du passage de la souris.

Exemple

<body>
    <a href="#">打工人</a><br />
    <a href="#">努力做个技术人</a>
</body>

Copier après la connexion

a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color:blue;
    text-decoration: underline;
}

Copier après la connexion

语法

input:focus {
	background-color: yellow;
}

Copier après la connexion

示例

<body>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
</body>

Copier après la connexion

input:focus {
    background-color: red;
}

Copier après la connexion

CSS fournit plusieurs sélecteurs composés

五、复合选择器总结

选择器	作用	特征	使用情况	隔开符号
后代选择器	选择后代元素	子孙后代都可以	较多	空格 .nav a
子代选择器	选择最近一级子元素	只选亲儿子	较少	大于号 .nav>p
并集选择器	选择多个元素	用于集体声明	较多	逗号 .nav,p,a
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	冒号 a:hover
:focus 选择器	选择获得光标的表单	跟表单相关	较少	冒号 input:focus

推荐学习：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!