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>

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

css代码body＞*是什么意思相关推荐

css游戏代码_介绍CSSBattle-第一个CSS代码搜寻游戏
css游戏代码 by kushagra gour 由kushagra gour 介绍CSSBattle-第一个CSS代码搜寻游戏 (Introducing CSSBattle - the first ...
css代码应该放html哪里,css代码放到哪里？
CSS以HTML为基础,提供了丰富的功能,如字体.颜色.背景的控制及整体排版等.css代码需要放到哪里? 是不是一定写到html文件里面呢? 下面给大家介绍一下. css代码的定义通常有三种方式,内部 ...
html广告位代码,一段CSS代码让你的广告位“立起来”
[摘要] 很多网站上都会投放广告,但一般情况下广告都不那么"好看",如果我们对广告位稍微进行美化,说不定能出人意料呢. 广告对于网站来说一直是一把双刃剑,既能给网站带来利益又很有可 ...
【译】一行css代码搞定响应式布局
译文出自:闪电矿工翻译组原文地址: medium.com/free-code-c- 原文作者: Per Harald Borgen 仓库原文链接:issue 译者: hanxiansen 在这篇文章 ...
CSS代码重构与优化之路
写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置 ...
高效整洁CSS代码原则 (下)
2019独角兽企业重金招聘Python工程师标准>>> 6. 适当的代码注释代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开 ...
Emmet：HTML/CSS代码快速编写规范（转发）
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
《切入口web教学——使用firebug调试css代码》录制完成
切入口(http://qierukou.com)致力于职业web前端开发定向在线培训.这节课主要讲解什么是firebug,firebug的安装过程,firebug基本操作,以及职业web前端开发是如何 ...
高效整洁CSS代码原则
CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Re ...
两行 CSS 代码实现图片任意颜色赋色技术
很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于 PNG 图片. mix-b ...

css代码body＞*是什么意思

">"子代选择器

css代码body＞*是什么意思相关推荐

最新文章

热门文章