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

╰+攻爆jí腚メ 2022-12-17 04:27 223阅读 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 条评论，223人围观）

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

相关阅读

相关【前端_层次选择器】子代选择器、后代选择器、兄弟选择器、相邻选择器

[CSDN话题挑战赛第2期][CSDN_2] 参赛话题：[学习笔记][Link 1] 学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记

太过爱你忘了你带给我的痛/ 2024年04月06日 13:41/ 0 赞/ 107 阅读

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

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

傷城~/ 2023年10月03日 22:54/ 0 赞/ 10 阅读

相关复合选择器-后代选择器（HTML、CSS）

复合选择器-后代选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

左手的ㄟ右手/ 2023年10月03日 12:49/ 0 赞/ 45 阅读

相关复合选择器-并集选择器（HTML、CSS）

复合选择器-并集选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

- 日理万妓/ 2023年10月03日 12:49/ 0 赞/ 49 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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