CSS后代选择器和子元素选择器的区别

作者：JasonXie | 来源：互联网 | 2023-07-02 10:31

其实后代选择器和子元素选择器，单单在字面上来看，并不能看出什么却别，总结一下可以这么说，后代选取器匹配先关元素的所有后代元素，但是子元素选择器只选择气直接子元素。比如如下例子，上代

其实后代选择器和子元素选择器，单单在字面上来看，并不能看出什么却别，总结一下可以这么说，后代选取器匹配先关元素的所有后代元素，但是子元素选择器只选择气直接子元素。比如如下例子，上代码：

`Welcome to My Homepage`



My name is Donald

I live in Duckburg.

I live in Duckburg.



I will not be styled.

My best friend is Mickey.

其效果是这样的：

《CSS后代选择器和子元素选择器的区别》

但是子元素选择器的效果是这样的：

`Welcome to My Homepage`



My name is Donald

I live in Duckburg.

I live in Duckburg.



I will not be styled.

My best friend is Mickey.

《CSS后代选择器和子元素选择器的区别》

通过代码和相关效果相信肯定看出区别在哪里了

推荐阅读

key
css如何设置span的宽度

这篇文章给大家分享的是有关css如何设置span的宽度的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。css设置span宽度 ... [详细]

蜡笔小新 2023-10-17 16:40:27
get
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
string
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
string
动态规划算法的基本步骤及最长递增子序列问题详解

本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]

蜡笔小新 2023-12-13 15:38:19
php
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
get
南邮ctf-web的writeup

本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]

蜡笔小新 2023-12-13 10:58:55
get
解决IE678伪类不兼容问题的方法

本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]

蜡笔小新 2023-12-13 10:50:43
get
解析GRE报文长度的方法及实现步骤

本文介绍了一种解析GRE报文长度的方法，通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ... [详细]

蜡笔小新 2023-12-12 20:55:05
client
移动端常用单位——rem的使用方法和注意事项

本文介绍了移动端常用的单位rem的使用方法和注意事项，包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值，以适应不同设备的屏幕大小。此外，还提到了rem目前在移动端的主流地位。 ... [详细]

蜡笔小新 2023-12-12 07:20:50
get
如何在HTML中获取鼠标的当前位置

本文介绍了在HTML中获取鼠标当前位置的三种方法，分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]

蜡笔小新 2023-12-11 13:04:00
java
【Vue基础】监听属性watch

Vue监听属性是watch，我们可以通过watch来响应数据的变化。代码示例： ... [详细]

蜡笔小新 2023-10-16 19:33:09
split
用pandas库修改excel文件里的内容，并把excel文件格式存为csv格式，再将csv格式改为html格式

假设有Excel文件data.xlsx，其中内容为： ID age height sex weight张三 1 39 181 female 85李四 2 40 180 male 80王五 3 38 178 female 78赵六 4 59 1 ... [详细]

蜡笔小新 2023-10-16 17:56:35
split
H5学习之二：深入探索video标签的使用技巧

<!DOCTYPEhtml><htmllang"en"><head><metacharset"UTF-8&qu ... [详细]

蜡笔小新 2023-10-14 08:46:10
get
React图片输入框移动端网页_018

React-图片输入框-移动端网页gitHub地址觉得有参考价值，点个赞https:github.comxiaopingzh…目录结构.├──README.md├──dist│├─ ... [详细]

蜡笔小新 2023-10-13 18:11:44
web
记一道腾讯前端笔试题

我今年4月投递了腾讯前端开发岗位，很可惜笔试题没通过，48小时内给出答案回复面试官，我的答案太过于简单，所以后面面试官估计也就懒得回我这个菜鸡来（嘤嘤嘤）。当然以我现在的眼光来重新 ... [详细]

蜡笔小新 2023-10-11 18:29:45

JasonXie

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章