请老师帮我检查一下，谢谢
来源：2-2 编程练习
weibo_慕婉清1565219
2019-10-25 18:24:29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #fff;
}
header{
background-color: #000;
height: 80px;
width: 100%;
}
header .container{
width: 1200px;
margin: 0 auto;
border:1px soild #000;
}
header .container div{
color: #fff;
margin:10px 25px;
float: left;
display: block;
font-size: 25px;
}
header .container nav{
float: right;
}
header .container nav > a{
width: 110px;
height: 73px;
color: #fff;
display: block;
font-size: 24px;
float: left;
line-height: 73px;
text-align: center;
}
header .container nav > a .Home{
background-color: #433b90;
}
header .container nav > a .Course{
background-color: #017fcb;
}
header .container nav > a .Actual{
background-color: #78b917;
}
header .container nav > a .Plan{
background-color: feb800
}
header .container nav > a .FAQ{
background-color: #f27c01;
}
header .container nav > a .Notes{
background-color: #d40112;
}
header .container nav > a:hover,header .container nav > a:active{
padding-bottom: 7px;
}
</style>
</head>
<body>
<header class="container">
<div><a href="www.imooc.com"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"></a>MYMOOC</div>
<nav>
<a class="Home" href="#">Home</a>
<a class="Course" href="#">Course</a>
<a class="Actual" href="#">Actual</a>
<a class="Plan" href="#">Plan</a>
<a class="FAQ" href="#">FAQ</a>
<a class="Notes" href="#">Notes</a>
</nav>
</header>
</body>
</html>
老师，我用sublime写的代码，使用后代选择器和子选择器都不能出现效果
1回答
-
同学你好，测试同学提供的代码，是没有实现效果的哦。效果如下图：
原因是同学书写的选择器不对。
建议：要保证自己使用的选择器的正确性哦，标签名与类名同时写，之间是没有空格的哦
代码参考：
右侧导航项第一个是默认选中的，可以设置一个类名，给第一个元素加上。
代码参考：
建议同学修改后再测试下。
如果帮助到了你，欢迎采纳~祝学习愉快~
0
相似问题