Question

当有一个用于更改活动菜单项外观的活动div（使用jquery）时，背景颜色会按预期更改（白色到黑色），但文本的颜色属性（黑色到白色）不是。为什么？ - 我该如何解决这个问题？

CSS

$(document).ready(function(){
    $('.menu a').click(function() {
    $(".menu a").removeClass("active")
    $(this).addClass("active")
    });
});

JS

<div class="menu">
            <ul>            
                <li><a href="#1">1</a></li>
                <li><a href="#2">2</a></li>
                <li><a href="#3">3</a></li>
                <li><a href="#4">4</a></li>
                <li><a href="#5">5</a></li>
            </ul>
        </div>
</html>

HTML

$(document).ready(function() {
  $('.menu a').click(function() {
    $(".menu a").removeClass("active")
    $(this).addClass("active")
  });
});

＆＃13;

.menu {
  width: 475px;
  margin: 0 auto;
}
.menu ul {
  min-width: auto;
  margin: 0 auto 0 auto;
  padding: 23px 0 0 0;
}
.menu li {
  list-style-type: none;
  float: left;
}
/*selected tag changes appearance*/

.active {
  background-color: #4a4a4a;
  color: #FFFFFF;
}
/*attributes of individual nav button*/

.menu a {
  text-decoration: none;
  width: 75px;
  padding: 10px;
  float: left;
  text-align: center;
  color: #4a4a4a;
}
/*changes appearance of menu item on hover*/

.menu a:hover {
  background-color: #4a4a4a;
  color: #FFFFFF;
  -webkit-transition: color, background-color .4s;
  /* Safari */
  transition: color, background-color .4s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ul>
</div>

＆＃13;

clang/g++

＆＃13;

Answer 1

这是因为CSS App Store Review Guidelines。选择器.menu a比.active更具体，因此它优先于color。尝试将.active更改为.menu a.active。

Answer 2

试试此代码

/*selected tag changes appearance*/
.menu > ul > li > .active {
    background-color: #4a4a4a;
    color: #FFFFFF;
}

为什么.active的颜色属性未应用？

2 个答案: