css2复合选择器

最新推荐文章于 2025-12-18 11:32:02 发布
原创 最新推荐文章于 2025-12-18 11:32:02 发布 · 1.1k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #css

本文详细介绍了CSS选择器的几种类型，包括后代选择器、仅选取子元素的子类选择器、并集选择器（用于多个选择器组合），以及伪类选择器如伪链接选择器和fouse伪类，帮助读者理解CSS样式控制的精确方式。

一.后代（包含）选择器（一样的标签可以用class命名以分别）

空格表示

全部后代

 应用

 

 二.子类选择器

>表示

只要子不要孙

 应用

 三.并集选择器

，表示  代表和

一般竖着写

 应用

 四.伪类选择器（包括伪链接选择器，结构选择器等）

1.伪链接选择器（链接不包含在body中，需要单独表示）

冒号表示

一般按顺序lvha

记忆：love hate/lv包hao

应用

 一般写法（只写这俩即可）

2.：fouse伪类选择器（填表单时的光标）

一般<input>类表单元素才获取

 

 五.总结

CSS复合选择器
m0_64365419的博客
11-13 748
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器基础之上的，对基本选择器进行组合形成的。 为什么要引入复合选择器？ 举例：要求将ul中的li标签中的元素修改 类似于上面的这种情况是很常见的，如果我们使用基础选择器，直接使用li标签对齐进行筛选，结果就是如下图所示，无论是ol中的li标签还是ul中的li标签元素都被修改了。显示：那么有的人会说，可以使用如下所示这种方式通过类选择器进行，这种方法 虽然没错，但是非常麻烦，十几行代码看不出，但是几十行甚至几百行呢？如
CSS——复合选择器、CSS特性、背景属性、显示模式
阳光开朗大男孩 =￣ω￣=的博客
11-05 1004
博客内容如下： 复合选择器包括后代、子代、并集、交集选择器。 伪类选择器可设置元素不同状态样式。 CSS 有继承性、层叠性、优先级特性。 Emmet 写法多为属性首字母缩写，背景属性可设置图、平铺、位置、缩放等。 显示模式有块级、行内、行内块元素，可通过display转换。 综合案例为热词超链接设置样式及鼠标悬停效果。
这 16 个 CSS 伪类，助你提升布局效率！
粉丝们务必加入微信粉丝群
09-14 5753
作者：Chidume Nnamdi 译者：前端小智 来源：mediuum 点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。 这篇文章.
css的复合选择器
2301_80872441的博客
02-28 1168
当。
css3 复合选择器,CSS复合选择器
weixin_28987001的博客
08-03 1685
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。比如： p.one 选择的是： 类名为 .one 的 段落标签。使用率相对较少记忆技巧：交集选择器 是 并且的意思。 即...又...的意思并...
认识CSS之复合选择器
榕城候佳人的博客
03-10 1263
在CSS中，可以把选择器分为基础选择器和复合选择器，而复合选择器又是由基础选择器进行组合形成的。通常是由两个或者多个基础选择器通过不同的方式组合而成的。作用：更精准、高效的选择目标元素（即标签）😃选择器作用特征使用情况隔开符号和用法后代选择器选择后代元素可以是子孙后代较多符号是空格.nav a子代选择器选择最近的一级元素只选亲儿子较少符号是大于号.nav>p并集选择器选择某些需要相同样式的元素可以用于集体声明较多符号是逗号链接伪类选择器。
CSS的复合选择器
屈帅波的技术博客
05-19 914
1 什么是复合选择器 在 CSS 中，可以根据选择器的类型把选择器分为：基础选择器 和 复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素（标签） 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等 2 后代选择器 后代选择器 又称为 包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层
CSS——复合选择器的使用
？的博客
04-19 662
交集选择器（标签+类选择器、标签+ID选择器、类+类选择器）、并集选择器、关系选择器（后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器）的使用
【CSS】CSS复合选择器
Txtechcom的博客
07-21 616
CSS 复合选择器
Web前端-CSS的复合选择器
2301_79188932的博客
10-08 776
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。3.常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。2.元素1是父级，元素2是子级，最终选择的是元素2。2.元素1是父级，元素2是子级，最终选择的是元素2。
CSS复合选择器使用介绍
09-25
CSS复合选择器是指一组由两个或两个以上的简单选择器通过特定的组合符连接而成的选择器，它能够选择更加具体和精确的元素。在实际开发中，复合选择器的使用能够帮助开发者更有效地控制页面的样式表现。下面我们来...
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 273
Boolean。
vue2/vue3前端创建脚手架并引入RBAC权限模型
demotang的博客
12-18 101
本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。
商城后台管理系统 03 规格参数配置
weixin_52943021的博客
12-15 220
【代码】商城后台管理系统 03 规格参数配置。
Harmony OS Web 组件：如何在新窗口中打开网页（实战分享）
Yihong1833100198的博客
12-17 695
摘要：本文分享了Harmony OS Web组件实现新窗口打开网页的实战经验。通过multiWindowAccess()设置允许新窗口，结合onWindowNew回调捕获并处理网页中的新窗口请求（如target="_blank"链接或window.open调用）。文章提供了典型应用场景（如区分内外链处理）、完整代码示例和常见问题解决方案，帮助开发者实现更智能的网页打开策略，提升应用体验。
万字讲解内网横向渗透vulnstack（七）：红日靶场7实战全流程1-提权Web1/Web2（CVE-2021-3493）
mooyuan的网络安全博客
12-18 678
本文详细记录了针对红日靶场7的多层渗透测试过程。首先通过外网攻击利用Redis未授权漏洞获取Web1跳板机权限，随后以此为跳板对内网Web2服务器进行渗透，先后利用Laravel漏洞获取初始访问权限、通过环境变量提权获取Docker容器内root权限，最后利用特权模式实现Docker逃逸，成功控制宿主机。整个渗透过程涉及信息收集、漏洞利用、权限提升、容器逃逸等多个环节，展示了从外网到内网的完整攻击链。
【每日算法】LeetCode 78. 子集
最新发布
LYFlied的博客
12-18 540
前端开发者学习算法的重要性与实践 文章摘要：算法学习对前端开发者至关重要，是从"页面构建者"向"复杂系统设计者"转变的关键。以LeetCode 78题子集问题为例，展示了回溯法、迭代法和位运算三种解法，并分析了各自的优缺点。回溯法因其可读性和灵活性成为最优解，特别适合前端场景如权限系统、商品筛选器等。文章强调算法思想比具体实现更重要，建议前端开发者通过实际应用场景来理解和练习算法，从而提升技术视野和问题解决能力。
【每日算法】LeetCode 17. 电话号码的字母组合
LYFlied的博客
12-18 540
摘要： LeetCode 17题要求根据电话数字组合返回所有可能的字母排列。该问题本质是组合问题，适合用回溯算法解决，其核心是通过递归探索所有路径（时间复杂度O(3^m×4^n)，空间O(m+n)）。提供了三种实现：经典回溯（递归清晰）、迭代法（队列避免栈溢出）和函数式编程（代码简洁）。回溯算法最优，因其必须遍历所有组合且空间效率高。类似场景包括前端动态表单、路由权限组合等，掌握此类算法能提升复杂系统设计能力。
css复合选择器
11-30
CSS复合选择器允许开发者同时应用多个选择器的条件到一个元素上，当一个元素同时满足所有指定的选择器条件时，该元素才会被选中并应用相应的样式。其表现形式是将多个选择器连写，中间不加任何空格[^1]。 用法上，交集选择器是将多个选择器连写，中间无空格，以此来筛选出同时符合多个条件的元素。伪元素选择器是CSS3新增的复合选择器，如`E::first-letter`用于选中块级文本的第一个单词或字（适用于中日韩CJK），`E::first-line`选中块级文本的第一行，`E::selection`可改变选中文本的样式（行内文本也适用）[^1][^3]。 以下是相关示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS复合选择器示例</title> <style> /* 交集选择器示例 */ p.red-text { color: red; } /* 伪元素选择器示例 */ p::first-letter { font-size: 2em; } p::first-line { font-weight: bold; } p::selection { background-color: yellow; color: blue; } </style> </head> <body> <p class="red-text">这是一个段落，演示CSS复合选择器的用法。</p> </body> </html> ``` 在上述代码中，`.red-text`类和`p`标签连写构成交集选择器，选中同时为`p`标签且有`red-text`类的元素，并将文字颜色设为红色。`p::first-letter`将段落第一个字大小设为原来的2倍，`p::first-line`将段落第一行文字设为粗体，`p::selection`将选中文本的背景设为黄色，文字颜色设为蓝色。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值