|
|
情况1: 使用后代选择器（特点：选择器和选择器之间使用空格隔开）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代与子代选择器的区别</title>
<style>
.zero li
{
border:1px solid red;
}
</style>
</head>
<body>
<ul class="zero" >
<li>我是祖先</li>
<ul>zero
<li>我是第二代</li>
<ul>
<li>
我是第三代
</li>
</ul>
</ul>
</ul>
</body>
</html>
情况2: 使用子代选择器（特点：选择器和选择器之间使用大于符号隔开）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代与子代选择器的区别</title>
<style>
.zero>li
{
border:1px solid red;
}
</style>
</head>
<body>
<ul class="zero" >
<li>我是祖先</li>
<ul>zero
<li>我是第二代</li>
<ul>
<li>
我是第三代
</li>
</ul>
</ul>
</ul>
</body>
</html>
子代选择器和后代选择器的区别：
后代包含子代，但是后代不全是子代。
验证中会遇到的问题:
当使用的css属性是可继承的会导致，使用子代选择器、后代选择器展示的效果是一样的。
可继承的属性：
可继承的样式： font-size, font-family, color, text-indent;
不可继承的样式：border, padding, margin, width, height；
同理，可以使用子代选择器和后代选择器去验证属性是否可继承。 |
|
发表于 2022-9-19 21:35:49