CSS复合选择器：后代选择器

复合选择器：后代选择器

格式：元素1 元素2 { 样式内容}
1、后代选择器中外层是父级，内层是子级，子级可以一直嵌套
2、元素1 和元素2 之间用空格隔开
3、元素1 和元素2 是任意的基础选择器，可以是类选择器，id选择器，标签选择器

  <ul><li>这是ul里的第1个li</li><li>这是ul里的第2个li</li><li>这是ul里的第3个li</li><li>这是ul里的第4个li</li><li>这是ul里的第5个li</li><li>这是ul里的第6个li</li><li>这是ul里的第7个li</li><li>这是ul里的第8个li</li><li>这是ul里的第9个li</li><li>这是ul里的第10个li</li></ul><ol><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li><li>这是ol里面的li标签</li></ol>

一、
/* 需求：想将ul里面的li的字体颜色改成红色 /
/ 下面的代码不使用选择器，有什么缺点 */

li {color: red;}

使用标签选择器而不使用后代选择器的效果：
/* 总结：在不使用后代选择器时，我们需要创建10个类名，且代码里还有ol里面的li，如果用标签选择器这会将全部li的字体设置为红色，这样代码量较大，代码不美观，不易阅读*/

二、
/* 此时，下面的代码使用选择器，有什么优点*/

 ul li {color: red;}

使用标签选择器的效果：

/* 总结：使用后代选择器，如需要将ul里面的全部li字体颜色设置为红色，只需要编写一行代码，代码量少，代码美观，易阅读 */

三、
接下来对后代选择器进行嵌套使用：
需求：对div中的p标签里面的a标签进行字体大小设置为30px，字体颜色为紫色，去掉下划线，且将div标签添加类选择器。

<div class="one"><p><a href="">这是p标签里面的a标签</a></p></div>

/* 接下来对后代选择器进行嵌套使用 */.one p a {color: purple;font-size: 30px;text-decoration: none;}

对后代选择器进行嵌套使用的效果：

总结，在书写代码时使用后代选择器需要注意的地方：
格式：元素1 元素2 { 样式内容}
1、后代选择器中外层是父级，内层是子级，子级可以一直嵌套。
2、元素1 和元素2 之间用空格隔开。
3、元素1 和元素2 是任意的基础选择器，可以是类选择器，id选择器，标签选择器。
4、后代选择器是选择元素1中所有的元素2。

CSS复合选择器：后代选择器相关推荐

复合选择器-后代选择器（HTML、CSS）
复合选择器-后代选择器(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
CSS串联和后代选择器
串联选择器:作用在同一个标签上复制代码代码如下: <div class="a" id ="qq"><span>look at the ...
css 交集选择器并集选择器后代选择器
css 交集选择器并集选择器后代选择器 **交集选择器:**就是相互交集在一起的选择器同时对一个标签进行样式的书写. 代码如下: <!DOCTYPE html> <html l ...
[css选择器] 后代选择器
后代选择器原文链接: 后代选择器后代选择器(descendant selector) 又称为包含选择器后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素我们可以定义后代选择器来创建一 ...
CSS中子选择器和后代选择器之间有什么区别
CSS子选择器和后代选择器之间有什么区别?下面本篇文章就来给大家对比一下子选择器和后代选择器,介绍子选择器和后代选择器之间的区别,希望对大家有所帮助. 子选择器子选择器用于匹配指定元素的所有子元素: ...
【CSS 教程系列第 8 篇】什么是 CSS 中的后代选择器
这是[CSS 教程系列第 8 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器.伪 ...
基本CSS选择器,复合选择器,后代选择器
基本CSS选择器有标记选择器.类别选择器.ID选择器3种 1.标记选择器每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等 2.类别选择器类别选择器的名称可 ...
CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
CSS复合选择器建立在基础选择器上,对基本选择器进行组合形成的可以更准确.更高效的选择目标元素(标签) 包含:后代选择器.子选择器.并集选择器.伪类选择器一.后代选择器又称为包含选择器,可以选 ...
CSS3中的群组选择器,后代选择器[空格]子元素选择器＞相邻兄弟选择器+兄弟选择器~
群组选择器(',') /* 表示既h1,又h2 */ h1, h2 {color: red; } 后代选择器[空格] /* 表示 h1 下面的所有 span 元素,不管是否以 h1 为直接父元素 */ ...
QT qss选择器------后代选择器
格式:选择器 1 选择器 2{ 属性: 值; } 这个选择器表示: 在选择器 1 匹配的所有对象中, 找到选择器 2 所匹配的所有后代对象, 并给它们设置样式. 注意点: (1). 后代选择器必须用 ...

CSS复合选择器：后代选择器

CSS复合选择器：后代选择器相关推荐

最新文章

热门文章