css代码body＞*是什么意思

编程知识更新时间:2023-04-06 07:47:47

今天学习前端的时候，发现body>*这样一个选择器,详细代码如下。我大概知道它的作用，但是不太确定，想从网上搜个现成的答案，百度了一下居然没找到，只好按照自己的理解写一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>子代选择器</title>
    <style type="text/css">
        body>*{ width:980px; height:auto; margin:0 auto; margin-top:10px;
            border:1px solid #000; padding:5px;}
        header{ height:50px;}
        section{ height:300px;}
        footer{ height:30px;}
        section>*{ height:100%; border:1px solid #000; float:left;}
        aside{ width:250px;}
        article{ width:700px; margin-left:10px;}
    </style>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<section>
    <aside>侧边栏</aside>
    <article>文章</article>
</section>
<footer>页脚</footer>
</body>
</html>

""是通配符，包括所有元素。
"body>"是指选择所有父级元素是 body的子元素，通俗点说就是只包括body的儿子这一代，但不包括孙子辈。在本例中，"body>*"包括的第一级子元素有header、nav、section、footer，不包括aside、article。

">"子代选择器

">"选择器是css3新增的选择器，用于选择元素的第一级子元素。
案例见下面代码：

<style>
div>p   /*指div的第一级子元素p*/
{
	background-color:#ccc;
}
</style>
<div>
<p>I live in Duckburg.</p> <！--背景色是#ccc-->
</div>
<div>
<span><p>I will not be styled.</p></span> 
<！--有span元素，这里p不是div的第一代子元素，所以背景色不是#ccc-->
</div>