a标签的继承问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{padding:0px;margin:0px;}
.container{
width:1200px;
height:100px;
background-color:black;
position:absolute;
top:50%;
left:50%;
margin-left:-600px;
margin-top:-50px;
}
.logo{
margin-left:-15px;
}
.one,.two,.three,.four,.five{
float:left;/*除非我把这5个导航都写成span,否则只能用float了吧*/
padding-right:50px;
text-align:center;
}
.nav{
font-size:45px;
font-family:"微软雅黑" ;
/*color:white;*//*为什么我必须给a标签设置颜色为白色才行,单给文字设置白色,效果却变成紫色??*/
/*border:1px solid red;*/
/*为什么我设置了边框的话字体就会跑出整个容器??*/
position: absolute;
left:400px;
bottom:20px;/*该如果让导航栏水平垂直居中,如果设置成同一个容器里,那我只能用position(定位)才能移动导航栏的位置,那样的话这个导航栏就脱离了常规流,没法做居中设立了*/
}
a{
color:white;
text-decoration: none; /*为什么text-decoration一定要写在这里才有效,写在div或nav里为什么不能够继承????
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a>
</div>
<div class="nav">
<div class="one"><a href="#">课程</a></div>
<div class="two"><a href="#">职业路径</a></div>
<div class="three"><a href="#">实战</a></div>
<div class="four"><a href="#">猿问</a></div>
<div class="five"><a href="#">路径</a></div>
</div>
</div>
</body>
</html>还是这段代码,请老师看一下style标签中最后一个对a标签设置的样式,为什么text-decoration只能写在这里才能达到消除下划线的目的,写在nav或div中为什么没有继承?????
8
收起
正在回答
1回答
因为a标签有默认样式(下划线 与颜色) , a默认的样式会覆盖从父级继承的样式哦 . 希望能解答你的疑惑 ,祝学习愉快 !
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星