                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

子选择器的问题

body #box1{margin-bottom:30px;}/*有效果*/

body div #box1{margin-bottom:30px;}/*没效果*/

#box1{margin-bottom:30px;}/*有效果*/

div #box1{margin-bottom:30px;}/*没效果*/

为什么会这样子？

zqbinary

2016-01-27

源自：初识HTML(5)+CSS(3)-升级版 12-13

关注问题我要回答

687

操作

收起

2 回答

萌态狼回答被采纳 +3 积分
2016-01-27

div #box1{{margin-bottom:30px;}/*div标签和#box1是同一级标签，不存在#box1是div的子标签，所以凡是“div #box1”的写法不生效*/

0 回复有任何疑惑可以回复我~

收起回答

zqbinary 提问者

非常感谢！

2016-01-27 回复有任何疑惑可以回复我~

zqbinary 提问者

那为什么不是同一个: div#box1{ margin-bottom:30px; }/*不加空格也是有效果的*/ 据说这是个结合元素选择器，即将id选择器结合元素选择器使用。div#box1只会匹配id属性包含box1的所有div元素。具体看http://www.imooc.com/qadetail/113853

2016-01-28 回复有任何疑惑可以回复我~

忆_卿回复 zqbinary 提问者

你不加空格，就代表了是 id="box1"的div标签的样式。带空格是指，div下，含有id="box1"的子标签的样式了，两个名字都不同，div #box1{}这种写法叫子选择器，div#box1写法叫ID选择器能一样吗？因为在这你写的HTML里 #box1 就是代表div，你写的div #box1{} 是要改变的他的子类，他都没子类会有效果么？ <body> <div> <p id="box1">加油!</p> </div> </body>这样写你就可以看到效果了

2016-04-20 回复有任何疑惑可以回复我~