Question

我在页面上有一个菜单。

 <ul class="editorial-tabs-menu  menu">
   <li class="first"><a href="#" class="selected">Home
     <span></span>
    </a></li>
   <li><a href="#">Links</a>
     <ul>
      <li><a href="#analyzes">Link1</a></li>
      <li><a href="#ux">Link2</a></li>
     </ul>
   </li>
   <li><a href="#">About us</a></li>
 </ul>

我使用这个css：

.editorial-tabs-menu li a
{
display: block;
font-size: 13px;
font-weight: bold;
border: 1px solid #cfcfcf;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
background: -moz-linear-gradient(90deg,#F0F8FF,#fff);
background: -webkit-gradient(linear,0% 0,0% 100%,from(#F0F8FF),to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F8FF',endColorstr='#fff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#F0F8FF, endColorstr=#FFFFFFFF, GradientType=0)";
padding: 3px 0;
width: 83px;
text-align: center;
color: #666;
text-decoration: none;
font-family: 'B Nazanin',Tahoma,Arial;
position: relative;
/*border-bottom: none;*/
}

.editorial-tabs-menu li a:hover, .editorial-tabs-menu li .selected
{
    color: #FFF;
    color: rgb(255, 255, 255);
    background: -moz-linear-gradient(90deg, #095283, rgb(31, 108, 162)) repeat scroll 0px 0px transparent !important;
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#095283),to( rgb(31, 108, 162)));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#095283',endColorstr=' rgb(31, 108, 162)');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#095283, endColorstr='rgb(31, 108, 162)', GradientType=0)";
    border-color: #095283;
}

.menu ul li
{
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

.menu li:hover > ul li
{
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu ul li a
{
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
    background: none;
    border: none;
    float: right;
    text-align: right;
    /*border-bottom: 1px solid #353539;*/
}

我想在background: none;时为子菜单设置hover。

我设置了这个css

.menu ul li a:hover
    {
        background: none;
        color: #095283;
    }

但子菜单悬停时会获得css .editorial-tabs-menu li a:hover。

当我将此css更改为background: red;时，它的颜色为红色，但在ie和mozila中得到css .editorial-tabs-menu li a:hover。

Answer 1

您可以使用!important对样式定义进行后缀，以确保它覆盖任何其他定义。例如，你可以在你的CSS中写：

a:hover{background-color: #f00 !important;}

哪个匹配文档的所有标签...

这个jsFiddle说明了这一点，http://jsfiddle.net/GG2Da/1 - 尝试从css中删除!important，看看会发生什么。

希望这会有所帮助

为什么css在不同的浏览器中显示不同的风格？

1 个答案: