Question

我正在设置我的顶级<li>看起来像标签。并且在翻转div时显示，但如果div中有嵌套的<ul> <li>，则它们会继承与顶级<li>的

相同的标签样式

下面是我的风格：

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px; 
    color: #ffffff;
    display:block;
    outline:0;
    text-decoration:none;
    padding:10px 9px 2px 9px;
    /* Background color and gradients */

    background: #da0000;
    background: -moz-linear-gradient(top, #b80202, #da0000);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b80202), to(#da0000));

    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

这是我的HTML

<li>
    <a href="#">Headquarters</a>
    <div class="dropdown_2columns">
        <div class="col_2">
            <ul>
                <li><a href="board.php">Board</a></li>
                <li><a href="#">Staff</a></li>
            </ul>
        </div>
    </div>
</li>

我认为在顶级<li>添加一个课程会有所帮助，但没有运气。有什么我想念的吗？当上面的代码运行“Board”和“Staff”时，它们都会产生红色标签效果。

Answer 1

你的目标是LI中的所有As，所以这种行为是应该的。

这个“问题”有很多解决方案。最简单的方法是使用“子选择器”（仅使用CSS选择器）定位第一级LI：

#menu > li > a {
  ...
}

这应该只影响LI中的第一级As。

Answer 2

好吧，将一个类添加到顶级<li>将无效 - 因为内部<a>仍会受到以下因素的影响：

#menu li.myclass a

即，它们是<li>内的锚元素，类为“myclass”。

相反，您可以将规则更改为：

#menu > li > a

...意思是，只有<a>的{{1}}的直接子项<li>才会受到影响（IE6不支持此项））。 这假设您的#menu具有ID“menu”。

或者您可以使用（主要用于IE6兼容性）：

<ul>

请注意，在此，您必须重置/撤消/“覆盖”之前在#menu li li a { /* Undo styles you applied to #menu li a */ }上设置的所有样式，这些样式不希望应用于内部锚点。

IE6的替代方案 - 你不需要重置/撤消样式 - 是在#menu li a而不是<a>上设置一个类：

<li>

Answer 3

我认为如果没有更完整的HTML片段，就无法回答这个问题。人们回答时必须假设哪个元素的ID为#menu。

如果HTML看起来像这样：

<div id="menu">
  <ul>
    <li>
      <a href="#">Headquarters</a>
      <div class="dropdown_2columns">
        <div class="col_2">
          <ul>
            <li><a href="board.php">Board</a></li>
            <li><a href="#">Staff</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

然后解决方案是：

#menu > ul > li > a { ... }

如果代码如下所示：

<ul id="menu">
  <li>
    <a href="#">Headquarters</a>
    <div class="dropdown_2columns">
      <div class="col_2">
        <ul>
          <li><a href="board.php">Board</a></li>
          <li><a href="#">Staff</a></li>
        </ul>
      </div>
    </div>
  </li>
</ul>

然后正确的选择器将是：

#menu > li > a { ... }

如果它看起来不像那些片段，那么我需要查看更多代码才能更好地回答您的问题！

还有一件事 - 如果你想要更加具体，你也可以使用第一个孩子，它将被实现为：

#menu > ul > li > a:first-child { ... }

...或

#menu > li > a:first-child { ... }

...取决于您的HTML。

我的嵌套<li>从其父</li>继承样式

3 个答案: