CSS:更改列表中项目符号的颜色?

麦可

我在更改列表中项目符号的颜色时遇到问题。

因此,我<nav>在HTML文件标记中有一个列表

<nav id="top-menu">
    <ul>
        <li> <a href="">Home</a> </li>
        <li><span> <a href="">Products</a> </span></li>
        <li> <a href="">Statistics</a> </li>
        <li> <a href="">Countries</a> </li>
        <li> <a href="">Settings</a> </li>
        <li> <a href="">Contacts</a> </li>
    </ul>
</nav>

如您所见,我的<nav>标签上有个id="top-menu"还有一件事:

<li><span> <a href="">Products</a> </span></li>

在这里您可以看到我<span>在子弹中放了一个标签。

这是我的CSS文件:

nav#top-menu {
    width: 100%;
    height: 33px;
    background-color: #696969;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

#top-menu ul li {
    margin: 0;
    padding: 0;
}

#top-menu ul li a {
    display: block;
    float: left;
    max-height: 25px;
    width: 100px;
    margin: 0;
    padding: 5px 0;
    font-family: tahoma, sans-serif;
    font-size: 20px;
    text-align: center;
    background-color: #696969;
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: #696969 solid 2px;
}


#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; }

然后我添加:

#top-menu ul li span {
    color: black;
}

问题是它什么都不会改变。

换句话说,现在导航菜单中的每个项目符号都是白色,但我想将“产品”设置为黑色。

我究竟做错了什么?

谢谢。

罗希特·阿扎德·马利克(Rohit Azad Malik)

试试这个

#top-menu ul li   span  a{
    color: black;
}

演示版

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更改列表的项目符号颜色

来自分类Dev

更改Chrome中的项目符号颜色?

来自分类Dev

悬停时更改列表项目项目符号/数字颜色

来自分类Dev

如何更改列表项图像项目符号的背景颜色?

来自分类Dev

更改<a>中包裹的悬停时的项目符号颜色

来自分类Dev

更改项目符号列表中列表项目的项目符号样式

来自分类Dev

悬停时更改列表项目的项目符号/数字颜色

来自分类Dev

AngularJs,将颜色更改为(重复)列表中的单个项目

来自分类Dev

CSS无法从项目符号列表中删除缩进

来自分类Dev

CSS-如何更改ionicframework中项目头像的背景颜色?

来自分类Dev

在CSS中更改离子项目的背景颜色

来自分类Dev

如何更改项目符号列表或非项目符号列表中第一行以外的所有行的缩进?

来自分类Dev

如何更改项目符号列表或非项目符号列表中第一行以外的所有行的缩进?

来自分类Dev

悬停框内的项目符号列表CSS

来自分类Dev

将状态栏项目(符号)的颜色更改为黑色

来自分类Dev

在css中更改盒子的颜色

来自分类Dev

如何在导航抽屉中更改列表中选定项目的颜色?

来自分类Dev

根据数据库中的值更改列表视图中特定项目的颜色

来自分类Dev

Android:在下拉列表中更改微调器项目的文本颜色

来自分类Dev

从选择列表选项更改CSS颜色

来自分类Dev

列表项的CSS颜色未更改

来自分类Dev

CSS列表菜单未更改背景颜色

来自分类Dev

在jsp中操作列表项目符号

来自分类Dev

Markdown中的多行项目符号列表

来自分类Dev

如何使列表中的项目符号点对齐

来自分类Dev

从 <ul> 中删除列表项目符号

来自分类Dev

仅在文本中更改 UL LI 项目符号点 - Wordpress - CSS

来自分类Dev

CSS-无序列表中项目符号之间的垂直线

来自分类Dev

如何左右对齐HTML和CSS中的每个备用列表项以及项目符号

Related 相关文章

  1. 1

    更改列表的项目符号颜色

  2. 2

    更改Chrome中的项目符号颜色?

  3. 3

    悬停时更改列表项目项目符号/数字颜色

  4. 4

    如何更改列表项图像项目符号的背景颜色?

  5. 5

    更改<a>中包裹的悬停时的项目符号颜色

  6. 6

    更改项目符号列表中列表项目的项目符号样式

  7. 7

    悬停时更改列表项目的项目符号/数字颜色

  8. 8

    AngularJs,将颜色更改为(重复)列表中的单个项目

  9. 9

    CSS无法从项目符号列表中删除缩进

  10. 10

    CSS-如何更改ionicframework中项目头像的背景颜色?

  11. 11

    在CSS中更改离子项目的背景颜色

  12. 12

    如何更改项目符号列表或非项目符号列表中第一行以外的所有行的缩进?

  13. 13

    如何更改项目符号列表或非项目符号列表中第一行以外的所有行的缩进?

  14. 14

    悬停框内的项目符号列表CSS

  15. 15

    将状态栏项目(符号)的颜色更改为黑色

  16. 16

    在css中更改盒子的颜色

  17. 17

    如何在导航抽屉中更改列表中选定项目的颜色?

  18. 18

    根据数据库中的值更改列表视图中特定项目的颜色

  19. 19

    Android:在下拉列表中更改微调器项目的文本颜色

  20. 20

    从选择列表选项更改CSS颜色

  21. 21

    列表项的CSS颜色未更改

  22. 22

    CSS列表菜单未更改背景颜色

  23. 23

    在jsp中操作列表项目符号

  24. 24

    Markdown中的多行项目符号列表

  25. 25

    如何使列表中的项目符号点对齐

  26. 26

    从 <ul> 中删除列表项目符号

  27. 27

    仅在文本中更改 UL LI 项目符号点 - Wordpress - CSS

  28. 28

    CSS-无序列表中项目符号之间的垂直线

  29. 29

    如何左右对齐HTML和CSS中的每个备用列表项以及项目符号

热门标签

归档