关于active和">"的问题
*{
padding:0;
margin:0;
font-family:Arial;
font-size:14px;
border:none;
}
a{text-decoration:none;}
ul{list-style:none;}
header{
height:80px;
width:100%;
background:#000;
}
header .container{
width:1200px;
margin:0 auto;
}
header .container a{
display:block;
float:left;
}
header .container nav{float:right;}
header .container nav a{
display:block;
float:left;
color:white;
font-size:24px;
height:73px;/*低于父容器高,备用*/
line-height:73px;/*行高等于自身高则上下居中*/
width:110px;/*设置宽度,撑开左右*/
text-align:center;
}
nav a:nth-child(1) { background: #433b90; }
nav a:nth-child(2) { background: #017fcb; }
nav a:nth-child(3) { background: #78b917; }
nav a:nth-child(4) { background: #feb800; }
nav a:nth-child(5) { background: #f27c01; }
nav a:nth-child(6) { background: #d40112; }
nav a:hover{
padding-bottom:7px;
}html代码与老师一样不再重复,请问我不使用">"也可以实现同样的效果,为什么还要用">"?
其中不使用active只用hover也实现了同样的效果,请问active是什么意思,它在这里的用处是什么?
30
收起
正在回答
1回答
同学你好,关于你的问题,回答如下:
1、“>”表示直接子元素,就是该元素下面的元素。比如:这里nav>a;就是nav的子元素a才有效。
而nav a就是nav下的a元素就有效,不管是子元素还是后代元素。
2、active是类名,这里是设置第一个元素(给第一个元素添加了这个类),默认的就有这个样式,不需要鼠标移入(hover的时候)触发。
如果我的回答帮助了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星