CSS 子代选择器和后代选择器

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量2.1k 收藏 12
点赞数 9
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63701007/article/details/124185091
版权

1. 有2种表达方式

.div>li

.div li

2种代码的运行结果如下

第一种 CSS html .div>li

 

第2种

 

总结：

第一种>是子选择器

第二种 带空格的是后代选择器

区别 顾名思义， 子选择器只选择子代，后代选择器就是子，孙都选择 

m0_63701007
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中关于群组选择器、后代选择器与子代选择器的优先级
一个无聊的前端写点无聊的东西
11-11 1179
群组选择器、后代选择器与子代选择器的优先级 群组选择器 要对不同的HTML对象定义相同样式时，可以采用群组选择器。例如： 要对p1，p2同时设置相同的颜色。 .p1,.p2{color:#aaa;} 上述规则在选择器中指定了多个对象，对象之间用逗号来分隔。逗号告诉浏览器，规则中包含两个不同的选择器。这样的选择器叫群组选择器。 后代选择器与子代选择器的概念与区别 后代选择器是指只要具备层级关系的元...
css_3_复合选择器_后代、子代、兄弟选择器
一个初学者的博客
06-13 469
注意：兄弟元素都是指定元素位置下面的元素。选择器1 选择器2 …选择器1>选择器2>…选择器1+选择器2 { }选择器1~选择器2 { }选择器之间用空格隔开。
CSS后代选择器和子选择器的区别
zero_xk_的博客
01-23 9231
首先来明确一下概念： 什么是后代选择器？ 语法：选择器1 选择器2{} 例子：#haha b{ color: red; } 解释：简单的来说呢，就是选择id为haha的元素的后代中的b标签，注意这里说的后代，后代不止有儿子，可能有孙子，孙子的儿子，孙子的孙子…只要是他的后代，而且是个b标签，颜色就会变成红色。 什么是子选择器？ 语法：选择器1>选择器2{} 例子：.xixi > i{ color: red; } 解释：简单来说呢，就是选择类xixi的元素的儿子中的i标签，注意这里说的儿子，
CSS - 选择器详解 - 子代、后代选择器详解 - 伪类选择器 - 测试
Muxiu
03-06 7913
目录测试准备：子代选择器 >测试代码：指定id的子代选择器后代选择器 (以空格隔开)指定 id 的后代选择器指定 class 类 的后代选择器多空格后代选择器详解 (特别重要)伪类选择器 :参考链接： 测试准备： 新建一个测试项目文件夹 test，然后在 test 文件夹内新建一个名为 css 的文件夹，创建一个名为 style.css的文件，最后在test文件夹下新建一个 test.html 文件。 test | —— | | ——css —— style.css | test.html 子代选择器
html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
weixin_31951365的博客
07-13 955
今天在看css基础的时候，发现了一个很有趣的事情，那就是 后代选择器 与 子元素选择器。说来也惭愧，我以前一直以为，这俩是同一个东西，只是叫法不同而已，后来才发现，原来这俩是两个不同的东西。后代选择器(descendant selector) 又称为包含选择器，可以选择作为某元素后代的元素。子元素选择器(Child selectors) 选择作为某元素子元素的元素看到这里，是不是觉得这俩作用差不多...
CSS的后代选择器和子代选择器的区别
daponi的博客
03-04 2641
1.后代选择器： 写法：$(“ancestor descendant” ，标签之间用空格隔开 例在的代码中写： <div> <p> <span>s1</span> </p> <span>s2</span> <div> <span>s3<
子代选择器和后代选择器
qq_51288495的博客
04-29 953
分辨子代选择器和后代选择器
CSS的子选择器与后代选择的区别
杜小白的博客
04-12 5047
一、子选择器还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ <h1>食物</h1> <ul class="foo...
css后代子代选择器
toufachangdehen的博客
05-20 1951
css后代子代选择器
后代选择器和子代选择器的区别
qq_42309685的博客
08-20 842
后代选择器和子代选择器的区别 后代选择器：div p：匹配div中所有的p元素 子代选择器：div>p：匹配div子元素中的p元素 代码： CSS部分 <style> .wrap { width: 400px; height: 220px; padding: 9px; font: 700/20px/40px "microsoft yahei"; ...
css后代选择器和子选择器的区别介绍
09-25
css后代选择器和子选择器的区别:用法不同,兼容性,所达到的效果不同等等，需要了解的朋友可以参考下
css串联选择器和后代选择器使用方法
09-25
串联选择器和后代选择器是CSS中的两种重要选择器，它们允许我们更加精确地定位和样式化页面元素。 **串联选择器（Adjacent Sibling Selector）** 串联选择器，也称为相邻兄弟选择器，用于选取紧接在另一个元素后的...
css 串联选择器和后代选择器介绍及示例
12-13
串联选择器和后代选择器是CSS中两种非常基础且常用的选择器类型，它们帮助开发者精确地定位到页面上的特定元素并为其设置样式。 1. **串联选择器（Combination Selector）** 串联选择器，也称为组合选择器，它将多...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 773
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 305
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 246
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 307
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 989
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
css 子代和后代选择器的区别
05-28
CSS中的子代选择器和后代选择器都可以用来选择某个元素的子元素，但它们之间有一些区别。 子代选择器使用">"符号，用于选择一个元素的直接子元素。例如，`ul > li` 选择所有直接子元素为 `li` 的 `ul` 元素。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值