html - 基础 CSS 选择器

Question

我正在使用 Foundation 5 并且在 css 选择器方面遇到了一些问题:我无法正确选择我想要的内容，很奇怪:

这是一个顶栏，我希望改变“右键事件”的背景颜色:

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

在css文件中，我这样写:

.active a {
            background-color: red;
 }

不行，我试过了

.top-bar-section ul.right li.active a  

一无所获。唯一有效的是

 .top-bar-section li.active:not(.has-form) a:not(.button)

但是我听不懂。谁能给我一些关于 CSS 选择器的帮助？谢谢!

Answer 1

您的选择器似乎没问题。 http://jsfiddle.net/BuA76/

有些东西正在覆盖你的规则。

确保你在所有其他人之后加载你的 css，并且你的规则至少和他们的一样严格 - 例如，#id优先级高于 .class在元素上 <div id='id' class='class'></div> ... .parent .class比 .class 更严格等等……

这是一个计算规则优先级的好工具/specificity : http://specificity.keegan.st/