CSS子选择器和后代选择器之间有什么区别？下面本篇文章就来给大家对比一下子选择器和后代选择器，介绍子选择器和后代选择器之间的区别，希望对大家有所帮助。
子选择器
子选择器用于匹配指定元素的所有子元素；它给出了两个元素之间的关系。该element > element选择器选择那些属于特定父元素的子元素。其中'>'左侧的操作数是父级，右侧的操作数是子元素。
语法：
element > element {
// CSS属性
}
示例：仅匹配<div>元素的所有子元素--<h2>元素
<!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>
效果图：
总结：
子选择器和后代选择器的区别：子选择器只能选择自己的子类，第二级元素，而不能选择第二级别以下的元素。后代选择能指定的对象，只要是元素下面的元素，无论几级，都能选定。
网友评论