a标签的继承问题

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中为什么没有继承?????

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

因为a标签有默认样式(下划线 与颜色) , a默认的样式会覆盖从父级继承的样式哦 . 希望能解答你的疑惑 ,祝学习愉快 !

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师