复合选择器——后代选择器，子选择器，并集选择器和伪类选择器

╰+攻爆jí腚メ 2022-12-17 04:27 134阅读 0赞

# 复合选择器复合选择器——后代选择器，子选择器，并集选择器和伪类选择器 #

复合选择器是简历在基础选择器之上的，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素。复合选择器由两个或多个基础选择器通过不同的方式组合而成的。 常用的复合选择器包括;后代选择器、子选择器、并集选择器、伪类选择器等等

### 后代选择器 ###

后代选择器又称包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在最前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

语法规范：

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

表示选择元素1里面的所有元素2；元素1和元素2之间用空格隔开。 元素1是父级，元素2是子级，最终的选择是元素2。元素2可以是元素1的儿子或者孙子的等，只需要是元素1的子级。

例如：

ol li {
    	color: red;
    }

后代选择器中的元素1和元素2可以是任意的基础选择器。

### 子选择器 ###

子元素选择器只能选择作为某元素最近一级的子元素。

语法

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

表示选择元素1里面的所有直接后代元素2。元素1和元素1之间必须有">"隔开。

### 并集选择器 ###

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

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

并集选择器是个选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。表示元素1和元素2都进行改变。

最会一个选择器之后不需要加逗号

### 伪类选择器 ###

伪类选择器可以向其他选择器加一些特殊的效果，比如给链接添加特殊效果，或选择第一个n个元素.

伪类选择器书写时用":"。

##### 链接伪类选择器 #####

a:link 选择所有未被访问的链接

a:visited选择所有已被访问的链接

a:hover选择鼠标指针位于其上的链接

a:active选择活动链接(鼠标正在按下未弹起时的链接)

链接伪类的注意事项

1、为了确保生效，按照link、visited、hover、active的顺序声明。

2、a链接在浏览器中有默认样式，所以给一般需要给链接单独指定样式。

##### :focus伪类选择器 #####

:focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器主要针对于表单元素。

例如：

inout：focus {
    	background-color:yellow;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关属性选择器，伪类选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF

谁践踏了优雅/ 2023年09月27日 13:38/ 0 赞/ 79 阅读

相关 CSS-高级选择器，后代选择器、交集选择器、并集选择器，伪类选择器的用法详解

常见的高级选择器有后代选择器、交集选择器、并集选择器后代选择器选择器之间用空格隔开就是后代选择器选择的是后代元素，不一定是儿子元素，后代选择器描述的是

妖狐艹你老母/ 2023年08月17日 16:30/ 0 赞/ 83 阅读

相关 CSS-包含选择器、后代选择器

说明： 1.包含选择器也可以叫做后代选择器。利用父子级关系进行选择. 2.父子级关系,从父级到子级的顺序，用空格分隔 <html> <he

我不是女神ヾ/ 2023年07月01日 06:24/ 0 赞/ 79 阅读

相关 CSS3中的群组选择器,后代选择器[空格]子元素选择器＞相邻兄弟选择器+兄弟选择器~

群组选择器（','） / 表示既h1，又h2 / h1, h2 { color: red; } 后代选择器\[空格\]

╰半橙微兮°/ 2022年12月19日 08:52/ 0 赞/ 218 阅读

相关复合选择器——后代选择器，子选择器，并集选择器和伪类选择器

复合选择器复合选择器——后代选择器，子选择器，并集选择器和伪类选择器复合选择器是简历在基础选择器之上的，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目

╰+攻爆jí腚メ/ 2022年12月17日 04:27/ 0 赞/ 135 阅读

相关 CSS的复合选择器（后代选择器、子选择器、并集选择器、伪类选择器、链接伪类选择器、:focus伪类选择器）

文章目录 1 什么是复合选择器 2 后代选择器 3 子选择器 4 并集选择器 5 伪类选择器 6 链接伪类选择器 7 :focu

末蓝、/ 2022年11月17日 14:58/ 0 赞/ 258 阅读

相关 CSS选择器中后代选择器和派生选择器有什么区别？

根据W3C的说明：派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上

绝地灬酷狼/ 2022年06月10日 14:00/ 0 赞/ 200 阅读

相关 CSS3 选择器——伪类选择器

前面花了两节内容分别在《[CSS3选择器——基本选择器][CSS3]》和《[CSS3选择器——属性选择器][CSS3 1]》介绍了[CSS3选择器][CSS3 2]中的基本选择

た入场券/ 2022年06月10日 05:24/ 0 赞/ 323 阅读

相关子代选择器和后代选择器

在CSS3中，我们会遇到这个一个问题，当层级过多的时候，我们想对其中的某些标签进行操作，有时候我们又想只对某一层级的标签进行操作，这个时候就涉及到字标签和后代标签的问题

落日映苍穹つ/ 2022年05月18日 09:43/ 0 赞/ 201 阅读

相关 CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器）

CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器） CSS选择器的使用 1. CSS基础选择器的使用 2

缺乏、安全感/ 2021年10月30日 01:01/ 0 赞/ 414 阅读