基础 CSS 选择器答案

【问题标题】：Foundation CSS selector基础 CSS 选择器
【发布时间】：2014-03-31 07:51:33
【问题描述】：

我正在使用 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 选择器的帮助？谢谢！

【问题讨论】：

您的选择器看起来不错。 jsfiddle.net/BuA76
@Shomz 我发现了问题，因为我也使用了 Foundation css，这个替换了我的。看来我需要学习几个css定义的冲突。
我明白了，确保你在加载所有其他 CSS 之后加载你的 CSS，并且你的规则至少和他们的一样严格 - 例如，#id 的优先级高于 .class on元素<div id='id' class='class'></div>....parent .class 比.class 等更严格...
@Shomz 这就是我问这个问题后发现的，真丢脸 :) 谢谢你的帮助！！

标签： html css css-selectors zurb-foundation

【解决方案1】：

您的选择器看起来不错。 http://jsfiddle.net/BuA76/

有些东西正在凌驾于你的规则之上。

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

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

【讨论】：

【解决方案2】：

Foundation 5 默认 CSS 文件替换了我的，因此我可以随意操作我选择的内容。 Foundation 使用的整个选择器或 ID 都可以解决问题。输入一个长选择器只是很烦人。

【讨论】：