复合选择器的进阶使用

最新推荐文章于 2024-09-16 23:33:40 发布
最新推荐文章于 2024-09-16 23:33:40 发布
阅读量166 收藏
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yhjqyy771/article/details/121954355
版权

选择器作用 格式  示例
后代选择器找后代选择器之间通过' '空格分隔.father .son { css }
子代选择器找儿子选择器之间通过'>'分隔.father > .son { css }
并集选择器找到多类元素选择器之间通过'，'分隔div ,p,span { css }
交集选择器找同时满足多个选择器的元素选择器之间紧挨着p.red { css }
hover伪类选择器选中鼠标悬停在文字上的状态:hovera:hover { css )



.














 

缘灝劫
关注
css选择器进阶
z000802的博客
04-01 362
1.复合选择器: 空格 作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素 选择器语法：选择器1 选择器2{css} 结果： 在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，设置样式 注意点： 后代包括：儿子、孙子、重孙子...... 后代选择器中，选择器与选择器之前通过空格隔开 <style> /* 找到div的儿子p设置文字颜色是红色 */
选择器进阶
qq_54201133的博客
05-11 224
选择器进阶 1.1后代选择器：空格 作用:根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素 选择器语法:选择器1 选择器2{ Css } 结果: 在选择器1所找到标签的后代(儿子、孙子、重孙子…) 中，找到满足选择器2的标签，设置样式 注意点: 后代包括:儿子、孙子、重孙… 后代选择器中， 选择器与选择器之前通过空格隔开 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
选择器进阶笔记
weixin_64335340的博客
05-03 272
css初学选择器的进阶
CSS＞选择器进阶＞复合选择器
Ssrpn0809的博客
04-02 343
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。1.子代选择器 语法：元素父>元素子{样式声明} 语法表示选择元素1里面的所有直接后代（子元素）元素2。2.后代选择器 语法：元素1 元素2{样式声明} 语法表示选择元素1里面的所有元素2（后代元素）定义：子元素选择器（子选择器）只能选择作为某元素的最近一级子元素（简单理解就是选亲儿子元素）在css中，可以根据选择器的类型把选择器分为基础选择器和复合选择器。后代选择器又称为包含选择器，可以选择父元素里面的子元素。
选择器进阶版
csonlgq的博客
11-21 147
选择器进阶版
CSS选择器进阶
helpluozhao123的博客
10-18 92
目标：能够理解 复合选择器 的规则，并使用 复合选择器 在 HTML 中选择元素 学习路径：作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素 ➢ 选择器语法：选择器1 选择器2 { css } ➢ 结果： • 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 ➢ 注意点：➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素 ➢ 选择器语法：选择器1 > 选择器2 { css } ➢ 结果： • 在选择器1所找到标签的子代（
CSS进阶--选择器进阶
bug 消灭师的博客
03-30 140
CSS进阶
CSS进阶方法——复合选择器、元素显示、背景设置
m0_54034052的博客
01-07 522
符合选择器、元素显示、背景设置
CSS选择器进阶1.2
m0_71385141的博客
04-10 365
结果：在选择器1所找到的标签后代（儿子，孙子，重孙子...）中，找到满足选择器2的标签，设置样式。结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。结果：在选择器1所找到标签子代（儿子）中，找到选择器2的标签，设置样式。②交集选择器中如果有标签选择器，标签选择器必须写在前面。②后代选择器中，选择器与选择器之间通过空格隔开。结果：找到选择器1和选择器2选中标签，设置样式。②子代选择器中，选择器与选择器之间用>隔开。②每组选择器可以是基础选择器或者复合选择器。
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
复合选择器是指使用空格将多个选择器连接起来，从而选择父元素中的后代元素。其语法为：选择器1 选择器2 { css }。结果是，在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式...
CSS基础选择器+进阶选择器+伪类选择器
weixin_58139900的博客
09-16 211
目录 学习目标 什么是选择器 基本选择器 通配选择器 元素名称选择器 类选择器 id选择器 类与id的命名规则 总结 复合选择器 常用复合选择器 后代元素选择器 子元素选择器 语法 相邻选择器 交集选择器 并集选择器 伪类选择器 复合选择器的优先级问题 总结 （1）连接符不参与优先级计算（2）*的优先级为0（3）同级之间比较个数，不同级之间不可跨越 学习目标 掌握常用选择器的使用 熟悉选择器的优先级关系 掌握调试工具的基本使...
前端进阶之——基础选择器
N奈斯先生的博客
08-20 254
   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 目录 一、基础选择器 二、每日面试题 一、基础选择器 1、什么是选择器？ 选择标签，根据不同需求把不同标签选出来 2、选择器分类： 选择器分为基础选择器和符合选择器 一、基础选择器 标签选择器：将HTML标签名作为选择器，将某一类选择出来，如所有的div，不能差异化样式 <style>
《CSS新世界》书评
zhangxueyi的专栏
09-13 373
这本书是“CSS世界三部曲”中的最后一部，全书近600页，内容丰富，涵盖了CSS的全局知识、已有属性的增强、新布局方式、移动开发中的CSS新特性、CSS变量、文本和图像内容的增强、滤镜和混合模式、用户行为相关CSS等多个方面。《CSS新世界》的主要目标是帮助前端开发者突破CSS技能提升的瓶颈，适合具有一定CSS基础的前端开发者阅读。总的来说，《CSS新世界》是一本全面、深入且实用的CSS学习书籍，无论是对于想要深入了解CSS新特性的前端开发者，还是对于希望提升自己CSS技能的读者，都是一本值得一读的好书。
HTML、CSS实现树状图
p_s_p的博客
09-09 587
【代码】HTML、CSS实现树状图。
项目中使用简单的立体3D柱状图，不用引入外部组件纯css也能实现
qq_35452726的博客
09-13 371
在一些项目需求中，可能会遇到下面这种场景，3d柱状图来展示百分比，但是又不想引入外部组件，下面就用纯css给大家封装了一个组件。在需要使用的地方直接引入使用就好了，只传百分比，宽高有需要再传。
响应式CSS 媒体查询——WEB开发系列39
一条晒干的咸鱼的博客
09-15 1515
CSS媒体查询（Media Queries）是响应式设计中的核心技术之一，帮助我们在不同设备上展示不同的样式。通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。
CSS——网格布局（display: grid）之上篇
最新发布
懒羊羊大王的博客
09-16 508
CSS网格布局（CSS Grid Layout）是一种用于创建复杂网页布局的系统，它允许开发者以二维系统（行和列）来控制元素的布局。跟 Flexbox 类似，网格布局也是作用于两级的 DOM 结构。设置为 display: grid 的元素成为一个网格容器（grid container）。它的子元素则变成网格元素（grid items）。下面将详细介绍网格布局：
unocss 一直热更新打印[vite] hot updated: /__uno.css
Rverdoser的博客
09-12 534
请注意，如果 __uno.css 是一个正在生成的文件，并且正在被热更新，这通常是预期内的行为。查看 unocss 文档：查看 unocss 的官方文档，看是否有其他用户遇到类似问题，或者是否有相关的解决方案。确认代码变更：首先确认你的代码中是否有对 unocss 相关的变更，如果有，这是正常的热更新行为。查看 Vite 日志：如果问题依然存在，查看 Vite 的详细日志，可能会有更多的线索。检查 unocss 配置：确保 unocss 的配置是正确的，没有配置错误导致的问题。
CSS选择器深入解析：复合、并集、子代与特性应用
教程详细讲解了不同类型的CSS选择器，如复合选择器、并集选择器、子代选择器以及hover伪类选择器的用法，同时也涉及了背景相关属性和元素的显示模式。此外，还介绍了如何利用Emmet语法提高编写CSS的效率，并通过综合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值