Parlons de plusieurs sélecteurs en CSS

Aujourd'hui, cet article parle principalement de plusieurs sélecteurs en CSS. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

1. Sélecteur de caractère générique

Le sélecteur de caractère générique est représenté par le symbole "*" Il a la portée la plus large parmi tous les sélecteurs et peut correspondre au contenu. de la page. Tous les éléments

/*设置当前页面中所有标签的颜色为红色*/* {color: red;
}

2. Sélecteur de balises

Le sélecteur de balises sélectionne les balises portant le même nom dans la page actuelle.

/*设置所有p标签的文字颜色为红色*/p {color: red;
}

3. Sélecteur d'identifiant

Le sélecteur d'identifiant est identifié par "#", suivi du nom de l'identifiant

{:;
}

Il s'agit du titre

Notez que la valeur de l'attribut ID dans la balise HTML doit être unique dans une page (il s'agit d'une spécification du W3C plutôt que d'une règle stricte).

Convention de dénomination du sélecteur d'ID

• Seules les lettres (majuscules et minuscules, distinction stricte), les traits de soulignement et les chiffres sont autorisés, c'est-à-dire id="Head" N'est pas en conflit avec id="head"

• Autorisé uniquement à commencer par une lettre

• Il n'y a pas de limite de longueur pour le nom, il peut être 1 lettre, ou Il y en a plusieurs, mais il n'est pas recommandé d'être trop long

• Les noms de tags ne sont pas autorisés (ce n'est pas une règle absolue)

4、类选择器

类选择器就是选取页面中所有标签的class属性值相同的一类标签，用.（点）表示

{:;
}

这是标题1

这是标题2

一个标签可以包含多个类选择器，在class标签中用空格隔开。

.head {color: blue;
}.subHead {font-size: 50px;
}

这是标题2

5、复合选择器

5.1、交集选择器

交集选择器又称标签指定式选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如

h3.special  /* 需要满足标签是h3同时拥有special类 */

或

p#one /* 需要满足标签是p同时id为one */

5.2、并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式

/*同时给标签h3与class为box的元素设置样式*/h3, .box {color: red;font-size: 14px;
}

 5.3、后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代（后代不仅仅包括儿子，还包括子子孙孙）。

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!