测试嵌套顺序导致的图标和文字颜色显示不一致,{代码...} 通过css调解文字和图标没法同时显示同一种颜色后来通过js获取css样式修改span里面的css仍然没有成功 {代码...} 希望朋友帮忙指点一下,谢谢"> javascript - <i class=""></i>与<span>测试</span>嵌套顺序导致的图标和文字颜色显示不一致-Fragen und Antworten zum chinesischen PHP-Netzwerk
javascript - 测试嵌套顺序导致的图标和文字颜色显示不一致
PHP中文网
PHP中文网 2017-04-10 15:39:58
0
3
966
  • 通过css调解文字和图标没法同时显示同一种颜色
    后来通过js获取css样式修改span里面的css仍然没有成功

    希望朋友帮忙指点一下,谢谢

    PHP中文网
    PHP中文网

    认证0级讲师

    Antworte allen (3)
    Ty80

    你是说无序前面那一点和链接字体的颜色要一致吗?

    • 巴扎黑

      你试下把上面贴的css换成这样试试,不知道是不是你要的结果:

      .footer .topmenu>li>a{ margin-top:10%; height: 48px; margin-right: 1px; display: block; text-align: center; color: #B0B0B0; background: none; text-decoration: none; -webkit-box-flex: 1; } .footer .topmenu>li>a span{ overflow: hidden; margin: 0 0 0 0; font-size: 12px; color: #B0B0B0; display: block; line-height: 18px; text-align: center; } .footer .topmenu>li>a:hover,.footer .topmenu>li>a:hover span{ color:#930e0e; }

      你的css写的有点混乱啊,important不要乱用。

        PHPzhong

        关于楼主代码中的几个小问题
        1、首先用到了a标签超链接,定义这个元素样式需要使用伪类选择器的,如:

        a:link {} /* 设置超链接a在未被访问前的样式 */ a:visited {} /*设置超链接a已被访问过时的样式 */ a:hover {} /* 设置超链接a在其鼠标悬停时的样式 */ a:active {} /* 设置超链接a在被用户激活时的样式 */

        2、如果针对于a元素定义了颜色样式如a:link{color:red},那么子元素span,i标签都会继承color值,根据你提供的代码默认情况下两者的颜色会保持一致,都会继承父元素字体颜色。

        3、getElementById("test")这个方法是选择id=test对象,而你的HTML结构里属性是,这样导致你的脚本会失效。

        4、请楼主多巩固CSS的一些选择器和属性的基础用法,提供一个 CSS 参考手册

        如还有疑问,欢迎交流。

          Neueste Downloads
          Mehr>
          Web-Effekte
          Quellcode der Website
          Website-Materialien
          Frontend-Vorlage
          Über uns Haftungsausschluss Sitemap
          Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!