为了账号安全,请及时绑定邮箱和手机立即绑定

为什么这时候a标签内容执行结果的背景颜色是红色?

<style type="text/css">
a{background:red;}
div{
    background:white;
}
</style>
<div>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
</div>

一开始我以为是执行先后顺序的区别,后来发现无论是把a标签的CSS写在div{}前面还是后面,执行结果百度,慕课网都是红色。这是什么道理?跟权重有关吗还是咋地?求大手指点。

正在回答

3 回答

a标签是div标签的子标签,所以背景的设置执行就近原则,也就是a标签有背景设置,就覆盖了div标签的背景。

3 回复 有任何疑惑可以回复我~
#1

Vrilstorm

原来就近原则是不是单纯指代码间的物理距离,感谢
2016-12-12 回复 有任何疑惑可以回复我~
#2

白石青 提问者 回复 Vrilstorm

我也刚知道,刚反应过来。谢谢答主
2016-12-12 回复 有任何疑惑可以回复我~
#3

白石青 提问者

还是不太明白就近原则。对于a标签内容来说,就近原则,css中哪个离得近就执行哪个不是吗?那在css中把div写在a后面,html中div距离a标签内容不就更近吗?总觉得我理解错了某个东西,兄弟能解释一下吗?
2016-12-12 回复 有任何疑惑可以回复我~
#4

白石青 提问者

是不是这样理解,对于“百度,慕课网”这个a标签的内容来说,因为距离a标签无论怎样都是最近的,所以要执行a的css样式。如果是这样的话就好理解了。
2016-12-12 回复 有任何疑惑可以回复我~
#5

煎饼学徒 回复 白石青 提问者

对,百度、慕课网是a标签的内容,而a标签属于div标签的子标签,也就是相当于房子里放着一个盒子,盒子里放着一块糖,糖离盒子最近,就近呈现盒子的css样式。
2016-12-12 回复 有任何疑惑可以回复我~
#6

白石青 提问者

非常感谢!
2016-12-13 回复 有任何疑惑可以回复我~
#7

vipchen 回复 白石青 提问者

三种样式的优先级 内联式>嵌入式>外联式
2016-12-15 回复 有任何疑惑可以回复我~
#8

思念的独奏

如果不给a设置颜色,为什么显示白色,也不是div设置的颜色
2019-07-12 回复 有任何疑惑可以回复我~
查看5条回复

我测试了下 div的背景色其实也是显示的,a标签和div标签的背景是同时显示的 

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

前景颜色和背景颜色属性值分别显示控件的底色和文字颜色。

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

举报

0/150
提交
取消

为什么这时候a标签内容执行结果的背景颜色是红色?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信