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 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星