admin管理员组

文章数量:1794759

css代码body＞*是什么意思

css代码body＞*是什么意思

今天学习前端的时候，发现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>

关于这个子代选择器，大家可以参照菜鸟教程，网址如下：www.runoob/cssref/sel-element-gt.html 同样的道理，section>*是指section的所有第一代子元素，本例中包括aside、article两个元素。

本文标签： 代码cssbody

版权声明：本文标题：css代码body＞*是什么意思 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969192a123653.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。