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

最新推荐文章于 2023-06-27 15:36:23 发布

郭洋羊羊羊羊

最新推荐文章于 2023-06-27 15:36:23 发布

阅读量1k

点赞数 1

分类专栏： HTML5 CSS 文章标签： CSS HTML web布局后代选择器子元素选择器

本文链接：https://blog.csdn.net/qq_21163257/article/details/53164963

版权

HTML5 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

其效果是这样的：

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

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

郭洋羊羊羊羊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS后代选择器和子元素选择器的区别

其实后代选择器和子元素选择器，单单在字面上来看，并不能看出什么却别，总结一下可以这么说，后代选取器匹配先关元素的所有后代元素，但是子元素选择器只选择气直接子元素。比如如下例子，上代码：菜鸟教程(runoob.com) div p{ background-color:yellow;}Welcome to My HomepageMy name is Donald
复制链接

扫一扫