关于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 星