子选择器与后代选择器的区别

子选择器（child selector）仅是指它的直接后代，即第一代后代，它通过“>”进行选择。

后代选择器是作用于所有子孙元素，它通过空格来进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

时间： 2024-10-29 10:47:34

子选择器与后代选择器的区别的相关文章

子类选择器和后代选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子类选择器和后代选择器</title> </head> <body> <div id="father"> <div>11</div> <div>22 <p>

子选择器还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑器中的代码: .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li(水果.蔬菜)加入红色实线边框. <style type="text/css"> .food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ </style

子选择器、后代选择器和通用选择器以及伪选择器

子选择器(>) .food>li{border:1px solid red;}后代选择器(空格) 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素.如右侧代码编辑器中的代码: .first span{color:red;} 这行代码会使第一段文字内容中的"胆小如鼠"字体颜色变为红色. 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代.而后代选择器是作用于所有子后代元素.后代选择器通

CSS系列之后代选择器、子选择器和相邻兄弟选择器

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red

CSS 组合选择符：后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器

CSS 组合选择符 CSS 组合选择符在 CSS3 中包含了四种组合方式:CSS组合选择符包括各种简单选择符的组合方式. 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选择器后代选择器用于选取某元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 divp{background-color:yellow; } 子元素选择器与后代选择器相比,子元素选择器(Child sel

Web全栈-后代选择器和子类选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> /* div p{ color: red; } */ /* #identity p{ color: red; } */ /* .para p{ color: blue; } */ /* #identit

CSS之后代选择器与多类选择器

<新人报到,欢迎拍砖#- -> 一.后代选择器说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子元素选择器 ----CSS 相邻兄弟选择器那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素: /*方式1*/p span{...}/*方式2*/p .A{...} 注意,上述代码的两个选择器间以空格空格空格分隔.另外,后代选择器

CSS 后代选择器

后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用. 举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写: h1 em {color:red;} 上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色.其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中: <h1>Th