Home > Web Front-end > HTML Tutorial > 关于链接和鼠标移上去的文字颜色问题_html/css_WEB-ITnose

关于链接和鼠标移上去的文字颜色问题_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:45:18
Original
939 people have browsed it

首先效果如图。

CSS:
#nav li{
width:70px;
float:left;
position:relative;
z-index:1;
height:38px;
display:table;
margin-right:10px;
}
#nav li a{
color:#d0f6d1;
font-size:12px;
font-weight:bolder;
display: block;
height:38px;
line-height:10px;
vertical-align:middle;   
    display:table-cell;
font-family:"黑体";
line-height:110%;
}
#nav li a:hover{
background:url(nav_a_bg.png) center no-repeat;
color:#329a07;
}
a.this{
color:#329a07;
background:url(nav_a_bg.png) center no-repeat;
}

HTML就是单纯的li和a了
  • 首页
    Home

  •    
  • 公司简介
    AboutUs



  • 目前主要是class="this"就是目前是在哪个栏目。
    不知道为什么color不生效,背景图片是没有问题的。
    鼠标移动到栏目上,字是会变成绿色,本来应该this的color生效,字也应该是绿色的才对啊。
    求大神们解惑。

    回复讨论(解决方案)

    css有覆盖顺序的,this里的a被#nav li a覆盖了。 提高一下this样式里的颜色的优先级就行,如下。

      a.this        {            background: url(nav_a_bg.png) center no-repeat;            color: #329a07 !important        }
    Copy after login

    因为上面#nav li a比a.this更具体,所以优先 
    a.this{
    color:#329a07;
    background:url(nav_a_bg.png) center no-repeat;
    }
     改成 
    #nav li a.this {
    color:#329a07;
    background:url(nav_a_bg.png) center no-repeat;
    }

    另外,不是很建议用this之类的关键字做样式的名称,或者像new,object之类的,虽然我也不知道有没有什么潜在的问题。。 ,有高手在的话希望帮忙解答一下。

    比如你可以用a.current。

    咦,我怎么记得class的优先级比ID要高= =……


    另外,不是很建议用this之类的关键字做样式的名称,或者像new,object之类的,虽然我也不知道有没有什么潜在的问题。。 ,有高手在的话希望帮忙解答一下。

    比如你可以用a.current。

    CSS优先级的计算规则如下:
    * 页面中定义的样式,加1,0,0,0
    * 每个ID选择符(如 #id),加0,1,0,0
    * 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
    * 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
    然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
    然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template