Question

我的导航栏很好用，但我需要在每个元素的背景中使用不同的颜色。我尝试给他们ID并在CSS中使用它，但它不起作用。 “信息日”应该是耐火砖（红色），但“路线”和“位置”应该是两种不同的颜色。任何人都可以帮助我吗？

.menuUl {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-left: none;
  border-right: none;
}
.menuLi {
  float: left;
  border: none;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: firebrick;
  border-radius: 5px;
}

<ul class="menuUl">
  <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a>
  </li>
  <li class="menuLi" id="infoDay"><a href="">INFO DAY</a>
  </li>
  <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a>
  </li>
</ul>

Answer 1

希望这有用：

＆＃13;

.menuUl{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-left: none;
    border-right: none;
}
.menuLi{
    float: left;
    border: none;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li:nth-child(1) a:hover {
    background-color: blue;
    border-radius: 5px;
}
li:nth-child(2) a:hover {
    background-color: firebrick;
    border-radius: 5px;
}
li:nth-child(3) a:hover {
    background-color: black;
    border-radius: 5px;
}

＆＃13;

<ul class="menuUl">
    <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li>
    <li class="menuLi" id="infoDay"><a href="">INFO DAY</a></li>
    <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a></li>
</ul>

＆＃13;

Answer 2

我在片段演示中更改了字体颜色的可见性，但主要想法是使用它们.menuUl{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-left: none; border-right: none; } .menuLi{ float: left; border: none; } li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { border-radius: 5px; } li#courses a:hover{ background-color: blue; } li#locations a:hover{ background-color: green; } li#infoDay a:hover{ background-color: firebrick; }。它特定于id并改变它们的顺序不会影响css

<div>
  <ul class="menuUl">
    <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li>
    <li class="menuLi" id="infoDay"><a href="">INFO DAY</a></li>
    <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a></li>
</ul>

  </div>

var starter = angular.module('starter', ['ionic'])

改变背景颜色悬停在不同的li a

2 个答案: