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

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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