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

最新推荐文章于 2024-07-22 16:02:58 发布

蓬莱老仙

最新推荐文章于 2024-07-22 16:02:58 发布

阅读量1.1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44486539/article/details/101643885

版权

本文详细介绍了CSS中的高级选择器，包括后代选择器、交集选择器、并集选择器以及伪类选择器的用法。通过实例解析了如何使用这些选择器来实现特定的样式效果，如给超链接添加不同状态的样式。正确理解并运用这些选择器，可以更精确地控制网页元素的样式表现。

摘要由CSDN通过智能技术生成

常见的高级选择器有后代选择器、交集选择器、并集选择器

后代选择器

选择器之间用空格隔开就是后代选择器
选择的是后代元素，不一定是儿子元素，后代选择器描述的是祖先结构
使用规则：外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子

示例：

<div class="box">
	<ul>
		<li>
			<p>段落</p>
			<p>段落</p>
			<p>段落</p>
			<div>
				<p>段落</p&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蓬莱老仙

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS之后代选择器（重点，精髓！！！）

m0_53521757的博客

04-24

1138

后代选择器 后代选择器选中的是指定元素的所有后代，父子级之间用空格连接示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后代选择器</title> <style type="text/css"> /* 父子级之间用空格连接, 将所有div标签下的span标签的文本颜色设置为红色*/ div span{ col

CSS进阶

weixin_67497686的博客

09-03

129

而你把一张600*600的图片作为背景图放进div盒子中，div盒子只会显示图片中300*300的部分，不会完整显示图片。另外，若不知道一个标签是块级还是行内，可以自己使用代码进行测试，首先测试能否独占一行，再测试宽高能否设置生效。超链接自己有颜色，就不会继承它爹的颜色， h1有自己固定的字号大小，就不会继承它爹的字号。设置了它的宽高，虽然行内后面还有空位，但因为独占一行，不能让其他标签来空位处。其实就是提示，当使用英文输入法输入：div，再回车，直接出现div完整标签。代码确实没报错，，我们看效果。

参与评论您还未登录，请先登录后发表或查看评论

CSS教程--CSS 后代选择器

weixin_30916125的博客

10-09

336

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写： h1 em {color:red;} 上面这个规则会把作为 h1...

css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

weixin_34061482的博客

10-18

332

css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器 高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一、后代选择器: 　　使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 　　也就是说,box类下的所有span标签字体颜色都被设置为了红色 .box span{ ...

CSS选择器（中）——高级选择器

weixin_34354173的博客

05-15

111

　　高级选择器，是区别于常见选择器的概念，是CSS的高级运用，也是作为扩展。总体来说，不使用高级选择器一样能做出十分优雅和绚丽的效果，但是使用高级选择器具有更高的语义化程度，而且能使你的html文本更加干净、简洁，您甚至可以不在html内显示引用类样式，因为它已经被定义在后台。　　注：以下信息均摘自网络，本人不承诺严谨可靠，且本人并未完全亲测，只是在火狐12.0及IE9中测试了，本人在本篇随笔...

交集选择器与并集选择器

最新发布

uu0216的博客

07-22

939

CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。CSS 选择器用于选择你想要的元素的样式的模式。看了上面的图，你发现就算你不知道选择器名字叫什么，属于哪一种，但不知不觉的，你其实已经习惯了其中的很多种选择器的使用。嘿嘿，这就是我现在的状态。看了这图之后，你是不是有一种感慨呢？选择器太多了，到底该怎么用呢？

Jquery 选择器

03-17

**jQuery 选择器详解** jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。其中，选择器是 jQuery 的核心功能之一，允许开发者高效地选取页面上的元素，进而进行操作。...

CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器

whileqq的博客

03-14

5723

CSS复合选择器 建立在基础选择器上，对基本选择器进行组合形成的可以更准确、更高效的选择目标元素（标签）包含：后代选择器、子选择器、并集选择器、伪类选择器 一、后代选择器 又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。 ol li { color: pink; } <ol> <li>我是ol的孩子</li

高级选择器

L333555333555的博客

04-21

nth-of-type(n) 首先满足：伪类选择器前面的条件，且在同一父级中，并且是同一类型的第几个才生效 ——（在该选择器中排序）————同类排序。以冒号为前缀，被添加到一个选择器末尾的关键字，当希望样式在特定状态下才被呈现到指定的元素时，可以往元素的选择器后面加上对应的伪类（pseudo-class）：nth-last-child(n)首先满足：伪类选择器前面的条件，且在同一父级中，其次必须是指定的第几个才生效——从后往前数。[attr] 选择伪类前选择器所选中的元素中包含attr属性的元素。

[css选择器] 后代选择器

weixin_36210698的博客

03-10

686

后代选择器 原文链接：后代选择器 后代选择器(descendant selector) 又称为包含选择器 后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写： h1 em {color:red;} 上面这个规则...

css后代选择器

wt540188的博客

09-25

539

css选择器