子选择器&&包含(后代)选择器

最新推荐文章于 2024-10-05 19:19:05 发布

又一个包子

最新推荐文章于 2024-10-05 19:19:05 发布

阅读量711

点赞数

分类专栏： html基本知识

本文链接：https://blog.csdn.net/whpu1234/article/details/81487674

版权

html基本知识专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1.子选择器
<div class="food"> <h1>你好</h1> </div>
如：.food > h1{ color:red; }
a：> 于号用于指定标签元素的第一代子元素（后代）

2.包含（后代）选择器
<div class="food">
<h1>
<p>你好</p>
</h1>
</div>
如：.food p{ color:green; }
a：空格作用于元素的所有后代

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子选择器</title>
    <style>
    .food>h2{
        color: red;
    }
    .food p{
        color: green;
    }
    </style>
</head>
<body>
    <div class="food">
        <h1>
            <p>第一代子元素</p>
        </h1>
        <h2>你好</h2>
    </div>
</body>
</html>

运行结果：