我有一个非常简单的导航菜单,我试图以不同于其他项目的方式设置一个项目的样式。但是,只应用背景,而边缘半径和链接颜色等其他内容则不适用。
这是菜单:
<div class="menu">
<ul>
<li><a href="page1.php">Page1</a></li>
<li><a href="page2.php">Page2 </a></li>
<li><a href="page3.php">Page3 </a></li>
<li class="extranav"><a href="extra.php">Extra</a></li>
</ul>
</div>
这些是通用菜单列表样式:
.menu ul{ margin:0px; padding:0px;}
.menu ul li{ float:left; background:url(../images/sprator.png) right top no-repeat; padding-right:1px;}
.menu ul li a{display:block; padding:0px 23px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#fff; line-height:46px; text-decoration:none; text-transform:uppercase;}
.menu ul li a:hover{ display:block;background: #b04141; /* Old browsers */
background: -moz-linear-gradient(top, #b04141 0%, #c35151 39%, #c35151 62%, #c35151 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b04141), color-stop(39%,#c35151), color-stop(62%,#c35151), color-stop(100%,#c35151)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* IE10+ */
background: linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b04141', endColorstr='#c35151',GradientType=0 ); /* IE6-9 */}
这就是我正在尝试应用于额外的nav元素:
.extranav a{
height:46px;
color:#FF0000;
line-height:46px;
display:block;
background: #206818; /* Old browsers */
background: -moz-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#024A00), color-stop(39%,#206818), color-stop(62%,#347C2C), color-stop(100%,#3E8636)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #024A00 0%,#206818 39%,#347C2C 62%,#3E8636 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* IE10+ */
background: linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */}
-moz-border-radius: 0px 0px 10px 0px;
-webkit-border-radius:0px 0px 10px 0px;
-khtml-border-radius: 0px 0px 10px 0px;
border-radius:0px 0px 10px 0px;
}
正确应用背景属性,而其他内容如链接颜色和边框半径则不适用。为什么会发生这种情况?如何解决?
答案 0 :(得分:2)
边框半径不是样式的一部分,你有}
结束之前的样式块。
更改此行:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */}
为:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */
.menu ul li a
选择器比.extranav a
选择器更具体,因此第一个规则中的设置优先。将选择器更改为.menu ul li.extranav a
以使其更具体。