CSS中子选择器和后代选择器之间有什么区别

CSS子选择器和后代选择器之间有什么区别？下面本篇文章就来给大家对比一下子选择器和后代选择器，介绍子选择器和后代选择器之间的区别，希望对大家有所帮助。

子选择器

子选择器用于匹配指定元素的所有子元素；它给出了两个元素之间的关系。该element > element选择器选择那些属于特定父元素的子元素。其中’>'左侧的操作数是父级，右侧的操作数是子元素。

语法：

element > element {// CSS属性
}

示例：仅匹配

元素的所有子元素–

元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS 子选择器  </title><style>  div > p {  color:white;  background: red;  padding:2px;  }  div > strong {  color:green;  padding:2px;  }  </style> </head> <body style = "text-align: center;">  <div>  <h2>CSS 子选择器  </h2>  <p>这是一个测试的p段落。p标签在div标签内！</p>  <p><strong>这是一个测试的文字。strong标签在div标签内的p标签中！</strong></p></div>  <div>  <strong>这是一个测试的文字。strong标签在div标签内！</strong>  </div> <p>这是一个测试的p段落。p标签不在div标签内！</p>  <p>这是一个测试的p段落。p标签不在div标签内！</p>  </body>
</html>

效果图：

后代选择器

后代选择器用于选择元素（不是特定元素）的所有子元素。它选择元素内部的元素，也就是说，它组合了两个选择器，这样，如果与第二个选择器匹配的元素具有与第一个选择器匹配的祖先元素，那么它们就会被选中。

语法：

element element {// CSS 属性
}

示例：选择div的所有子元素–p元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS 后代选择器  </title><style>  div p { font-size:26px; color:red;} div strong { background: green;} </style> </head> <body style = "text-align: center;">  <div>  <p>CSS 后代选择器 </p><p> <strong>Hello！</strong> </p> </div>  <div><p>这是一个测试的p段落。</p>        </div><div><strong>这是一个测试文字。</strong>        </div> <p>这是一个测试的p段落。</p>  </body>
</html>

效果图：

总结：

子选择器和后代选择器的区别：子选择器只能选择自己的子类，第二级元素，而不能选择第二级别以下的元素。后代选择能指定的对象，只要是元素下面的元素，无论几级，都能选定。
更多编程知识可以关注php中文网。

CSS中子选择器和后代选择器之间有什么区别相关推荐

CSS串联和后代选择器
串联选择器:作用在同一个标签上复制代码代码如下: <div class="a" id ="qq"><span>look at the ...
【CSS 教程系列第 8 篇】什么是 CSS 中的后代选择器
这是[CSS 教程系列第 8 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器.伪 ...
css有几种选择器，有什么区别？
基本选择器 1.标签选择器:直接用元素的标签来进行选择 span { // 直接选择span标签size:16px; } 2.ID选择器:通过设置id名字,进行精确的选择,用#来定义 # div1 { ...
css字体样式，选择器，外观属性
css字体样式,选择器,外观属性字体样式 ont-size:字号大小 font-family:字体 css unicode 字体 font-weight:字体粗细 font-style:字体风格 f ...
基本CSS选择器,复合选择器,后代选择器
基本CSS选择器有标记选择器.类别选择器.ID选择器3种 1.标记选择器每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等 2.类别选择器类别选择器的名称可 ...
css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).css语法(下图所示) 每个CSS ...
CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}
1.CSS的作用: 通过css达到美化网页的效果 2.选择器: ✔ 基础选择器(重点) ◆标签选择器(重点学习) ◆类选择器(重点学习) ◆ID选择器 ◆通配符选择器 ✔ 复合选择器(重点) ◆后代选 ...
css选择器所有后代,CSS 后代选择器
具体应用后代选择器的功能极其强大.有了它,可以使 HTML 中不可能实现的任务成为可能. 假设有一个文档,其中有一个边栏,还有一个主区.边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表.不 ...
html的css样式中表示后代选择器,css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). css语法(下图所示) 每个CS ...

CSS中子选择器和后代选择器之间有什么区别

元素

CSS中子选择器和后代选择器之间有什么区别相关推荐

最新文章

热门文章