Quels sont les sélecteurs avancés CSS ?

Les sélecteurs avancés CSS incluent : 1. Les sélecteurs descendants, séparés par des espaces lorsqu'ils sont définis, syntaxe "E F{}" 2. Les sélecteurs d'intersection, séparés par ".", syntaxe "E.F{" }" ; 3. Sélecteur d'union, séparé par des virgules, syntaxe "E,F{}" ; 4. Sélecteur de pseudo-classe ; 5. Sélecteur de frère suivant ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Sélecteur CSS : Il s'agit de spécifier la balise sur laquelle CSS doit agir, et le nom de cette balise est le sélecteur. Signification : Quel conteneur choisir.

Les sélecteurs CSS sont divisés en deux catégories : les sélecteurs à choix multiples de base et les sélecteurs étendus.

Sélecteur de base :

Sélecteur de balise : pour un type de balises Sélecteur d'ID : pour une balise spécifique Sélecteur de classe : Utiliser pour toutes les balises souhaitées Sélecteur universel (wildcard) : Applicable pour toutes les balises (non recommandé) Sélecteur avancé :

Sélecteurs descendants : séparés par des espaces

Sélecteurs d'intersection : séparés par .

Sélecteurs d'union (sélecteurs groupés) : séparés par des virgules Sélecteur de pseudo-classe

Sélecteur de frère ou sœur suivant

Sélecteur d'attribut

1. Sélecteurs descendants : séparez-les par des espaces lors de la définition de pour E F Ce format signifie que tous les éléments F qui descendent de l'élément E ont ce style. Un espace indique les descendants.

Le sélecteur descendant est une sorte d'équilibre : un équilibre de points communs et de caractéristiques. Lorsque vous souhaitez changer le style de tout dans une certaine partie, vous devez penser aux sélecteurs descendants.

Le sélecteur descendant décrit la structure de l'ancêtre.

La définition peut être un peu difficile à comprendre, regardons un exemple.

Exemple 1 :

.div1 p{ color:red; } Un espace signifie descendants. .p1 p signifie .p1 appartenant aux descendants de p .

Je voudrais souligner ici : ces deux balises ne doivent pas nécessairement être consécutivement l'une à côté de l'autre, tant qu'elles maintiennent l'association d'un descendant. En d’autres termes, c’est la descendance qui est choisie, pas nécessairement le fils.

Exemple :

h3 b i{ color:red ; } Le code ci-dessus signifie : Définir le style de la balise dans la balise dans la balise . De même : les balises h3, b et i ne doivent pas nécessairement être consécutivement adjacentes, tant que l'association d'un descendant est maintenue.

Effet :

Ou il y a l'écriture suivante :

Dans la manière d'écrire ci-dessus, la balise et la balise ne sont pas juste à côté l'une de l'autre, mais elles entretiennent une relation descendante.

Il existe également la méthode d'écriture suivante : (y compris le sélecteur de classe et le sélecteur d'identifiant sont acceptables)

Nous l'avons dit au début : Le sélecteur de descendant décrit une structure ancêtre . Prenons un exemple pour illustrer cette phrase :

Document div div p{ color: red; } .div2{...} .div3{...} .div4{...} 我是什么颜色？

Le p p p dans le CSS ci-dessus peut également rendre la couleur du texte rouge. Grâce à l'élément d'inspection du navigateur, on peut voir la liste des ancêtres de l'élément p :

En parlant de ça, mentionnons un autre raccourci sublime clés.

Saisissez p#haha en sublime et appuyez sur la touche de tabulation pour générer

.

Saisissez p.haha en sublime et appuyez sur la touche de tabulation pour générer

.

2. Sélecteur d'intersection Vous comprendrez si vous regardez l'image ci-dessous :

h3.special{ color:red; } 选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。

只能在h3标签中使用它：

css 注意，交集选择器没有空格。所以，没有空格的 p.red （交集选择器）和有空格的 p .red （后代选择器）不是一个意思。

交集选择器可以连续交：（一般不要这么写）

h3.special.zhongyao{ color:red; } 上面这种写法，是 IE7 开始兼容的，IE6 不兼容。

交集选择器，我们一般都是以标签名开头，比如 p.haha 比如 p.special 。

3、并集选择器：定义的时候用逗号隔开 三种基本选择器都可以放进来。

举例：

p,h1,#mytitle,.one/*定义了一个并集选择器，带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{ color:red; }

4、伪类选择器 对于 标签，其对应几种不同的状态：

link ：超链接点击之前 visited ：超链接点击之后 focus ：是某个标签获得焦点的时候（比如某个输入框获得焦点） hover ：鼠标放到某个标签上的时候 active ：点击某个标签没有松鼠标时 CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

静态伪类：只能用于超链接 动态伪类：针对所有标签都适用 下面来分别讲一下这两种伪类选择器。

（1）静态伪类：

用于以下两个状态（ 只能使用于超链接 ）：

link ：超链接点击之前 visited ：超链接点击之后 举个例子：

/*伪类选择器：静态伪类 */ a:link /*(针对所有利用href属性的)超链接(不包括锚点)点击之前是红色*/{

color:red; } a:visited/*让超链接点击之后是绿色*/{ color:green; }

问：既然 a{} 定义了超链接的属性， a:link{} 定义了超链接点击之前的属性，那这两个有啥区别呢？ 答：

a{} 和 a:link{} 的区别：

a{} 定义的样式针对所有的超链接(包括锚点) a:link{} 定义的样式针对所有写了href属性的超链接(不包括锚点) （2）动态伪类:

用于以下几种状态（适用于所有的标签）：

focus（聚焦，点击某个文本框后输入文字，可以定义文本框和文字的属性） ：是某个标签获得焦点的时候（比如某个输入框获得焦点） hover（盘旋，鼠标停留在上面） ：鼠标放到某个标签上的时候 active（长按状态） ：点击某个标签没有松鼠标时 举个例子：

/* 伪类选择器：动态伪类*/ input:focus/*让input文本框获取焦点时：边框：#FF6F3D这种橙色；文字：绿色；背景色：#6a6a6a这种灰色*/{ border:3px solid #FF6F3D; color:white; background-color:#6a6a6a; } label:hover/*鼠标放在label标签上时显示蓝色*/{ color:blue; } label:active/*点击label标签鼠标没有松开时显示红色*/{ color:red; }

css大神 利用这个 hover 属性，我们同样对表格做一个样式的设置：

表格举例：

Document /*整个表格的样式*/ table{ width: 300px; height: 200px; border: 1px solid blue; /*border-collapse属性：对表格的线进行折叠*/ border-collapse: collapse; } /*鼠标悬停时，让当前行显示#868686这种灰色*/ table tr:hover{ background: #868686; } /*每个单元格的样式*/ table td{ border:1px solid red; } 效果如下：

另外，介绍一下子代选择器：用符号 > 表示

IE7开始兼容，IE6不兼容:

div>p{ color:red; } p的儿子p。和p的后代p的截然不同。

能够选择：

我是div的儿子

不能选择：

我是div的重孙子

（3）序选择器

IE8开始兼容；IE6、7都不兼容

设置无序列表 中的第一个 为红色：

ul li:first-child{ color:red; } 设置无序列表 中的最后一个 为红色：

ul li:last-child{ color:blue; } 序选择器还有更复杂的用法。

由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

项目 项目 项目 项目 项目 项目 项目 项目 项目 项目 用类选择器来选择第一个或者最后一个：

ul li.first{ color:red; } ul li.last{ color:blue; } 5、下一个兄弟选择器 IE7开始兼容，IE6不兼容。

+ 表示选择下一个兄弟

h3+p{ color:red; } 上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。

我是一个标题 我是一个段落

我是一个段落

我是一个标题 我是一个段落

我是一个段落

我是一个标题 我是一个段落

我是一个段落

我是一个标题 效果如下：

这种选择器作用不大。

6、属性选择器 好处：将id属性和class属性选择器结合

格式有两种分别是：

标签元素名[属性名]{}

标签元素名[属性名=属性值] 注意：class*=""为*=并且带引号 属性选择器中常用的几个 正则表达式 通配符：

=绝对等于唯一（适合id）

*=包含（适合class）

^=以这个元素开头

$=以这个元素结尾 举例图：

学习视频分享： css视频教程

Quels sont les sélecteurs avancés CSS ?

Articles Liés