子元素选择器

用大于符号(>)（子结合符），用于选择指定标签元素的第一代子元素。

上例子理解！

<!DOCTYPE html>
<html lang="en">
<head><title>子元素选择器</title><style type="text/css">p > em{color:blue;}</style>
</head><body><p>这是<em>第一个</em>，然后这是<em>第二个</em></p><p>这是<em>第三个</em></p><p>这是<u><em>第四个</em></u></p></body></html>

例子解释：

p > em{color:blue;} 意味着：选择作为p元素子元素所有em元素内容应用样式
像“第二个”这样，仍然是p的第一代子元素，样式生效
虽然第一行的p已经应用过该样式，但是“第三个”仍是p的第一代子元素，样式生效（以上两个例子说明子元素选择器可以任意次数使用）
“第四个”不是p的第一代子元素，而是em是第一代子元素，故没法使用p的子元素选择器

.example > span{border:1px solid red;
}

这个要怎么理解呢？
首先可以等价为*.example > span 这行代码会使得任意元素中，含class名为example的子元素span加上红色边框

后代选择器

又称为“包含选择器”

使用空格作为结合符。与子元素选择器相比，>作用于元素的第一代后代，空格作用于元素的所有后代。

后代选择器的使用是非常有益的，如果父元素内包括的HTML元素具有唯一性，则不必给内部元素再指定class或id，直接应用此选择器即可。

<!DOCTYPE html><html lang="en"><head><title>后代选择器</title><style type="text/css">.example em{color:red;}</style>
</head><body><h1 class="example">啦啦啦<em>啦啦啦啦</em>啦<u><em>啦啦</em></u></h1></body></html>

可以看到，就算最后两个“啦啦”不是h1（class=example）第一代后代也边红了。

写在最后

打卡第十天了！明天想看看有没有关于选择器的实战，感觉学了一通也不太记得住，如果多重嵌套的话应该会遇到问题。

子选择器和后代选择器相关推荐

[css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别？
[css] 相邻兄弟选择器.后代选择器和子选择器三者有什么区别? 后代选择器与子选择的关系:后代选择器>子选择器. 后代选择器:包括父元素的子元素以及孙子元素(代表符号:空格)子选择器:包括父元 ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
html后代选择器的语法,[转]CSS子选择器与后代选择器
注:之前一直不混淆子选择器和后代选择器的关系,今天看到一篇文章很不错,一下子明白了,特此转载. 通俗的讲就是: 儿子一定是后代,但是后代不一定是儿子. css子元素选择器和后代选择器在功能描述上非常相 ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
CSS复合选择器：后代选择器
复合选择器:后代选择器格式:元素1 元素2 { 样式内容} 1.后代选择器中外层是父级,内层是子级,子级可以一直嵌套 2.元素1 和元素2 之间用空格隔开 3.元素1 和元素2 是任意的基础选择器, ...
html后代元素选择器,怎么使用html5中的后代选择器？后代选择器的用法详解!
最近网上很多小伙伴就在问,怎么使用html5中的后代选择器?看到这我就有点想说的了,对于怎么使用html5中的后代选择器,这个问题其实还是蛮重要的.对于想要从事互联网这块功的话算是基本都要有所了解的. ...
css复合选择器（后代选择器、子代选择器、并集选择器、链接伪类选择器、：focus选择器）
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
css 的基本选择器，复合选择器，后代选择器
基本CSS选择器有标记选择器.类别选择器.ID选择器3种 1.标记选择器每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等 2.类别选择器类别选择器的名称可 ...
js原生后代选择器_js 后代选择器
CSS规范 - 命名规则使用类选择器,放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用.NEC特殊字符:"-"连字符"-"在 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...

子选择器和后代选择器

子元素选择器

后代选择器

写在最后

子选择器和后代选择器相关推荐

最新文章

热门文章