Question

我在<a>容器中的列表项中具有样式#navigation元素的样式。这很好。

#navigation li a {
  text-decoration:none;
  background:#bfe5ff;
  color:#045e9f;
  width:125px;
  height:35px;
  padding-top:11px;
  display:block;
  float:left;
  margin-left:2px;
  text-align:center;
  font-size:18px;
  font-weight:bold;
}

现在在某些<li>中，我正在插入<div>个。在这些我再次使用一个列表，但它应该是风格不同或没有风格。

当我输入<li>时，它们的样式与外部<li>元素匹配，但它不应该。

我正在尝试使用它：

#newnavigation li a { 
  font-size:12px;
  margin-left:20px;
}

但它不起作用 - 它应用了“外部”样式。

这是我的标记：

<ul id="navigation"> 
  <li><a href="index.html">Home</a></li> 
  <li><a href="about.html">About</a></li> 
  <li><a href="contact.html">Contact</a></li> 
  <li class="browse">
    <a href="#">Browse</a>
    <div id="browsecontainer">
      <h3>Browse By Category</h3>
      <li><a href="#"></a></li>
    </div>
  </li>
</ul>

Answer 1

你的css是针对#id的新导航，但你是#id是导航请尝试以下方法：

<ul id="navigation"> 
  <li><a href="index.html">Home</a></li> 
  <li><a href="about.html">About</a></li> 
  <li><a href="contact.html">Contact</a></li> 
  <li class="browse">
    <a href="#">Browse</a>
    <div id="browsecontainer">
      <h3>Browse By Category</h3>
      <ul id="newnavigation">
          <li><a href="#">First category</a></li>
      </ul>
    </div>
  </li>
</ul>

Answer 2

它将继续应用外部样式 - 这是CSS中的“C”级联。您的新样式正在被正确拾取，但如果我正在阅读问题，您正试图消除其他“继承”样式，如背景颜色？

如果你想要不应用外部样式，那么你需要使用一个与外部图案不匹配的元素（即不是li，这里不实用），或者要覆盖你不喜欢的样式不想申请。如果你真的只想将这些样式应用于外部li元素集，那么可以考虑使用外部li元素上的CSS类作为替代方法，并应用不希望直接继承到该类的格式。

Answer 3

要选择内部项目，只需嵌套它们：

/** Matches outer *AND* inner LIs */
#navigation li {
}

/** Matches inner LIs only (li within li within #navigation) */
#navigation li li {
}

或者，为了匹配锚点：

#navigation li a {}
#navigation li li a {}

在内部样式中，您将从继承自外部样式的样式集开始，因此您可能希望通过覆盖它们来“撤消”某些设置以满足您的需求。

Answer 4

请注意，您的标记无效。要插入新项目，您还应插入新列表，即：

<ul id="newnavigation>
  <li>
    <div>
      <ul>
        <li></li>
      </ul>
    </div>
  </li>
</ul>

validate your markup当你的风格，Javascript等出现问题时，这总是一件好事。

话虽如此，为了只匹配内部LI，你需要的CSS规则是：

#newnavigation li ul li{
  // stuff here
}

Answer 5

我猜它是这样的？

<ul id="navigation">
    <li><a href="#">link</a></li>
    <li><ul id="newnavigation"><li><a href="#">link</a></li></ul></li>
</ul>

我复制并粘贴你的样式，它工作正常。究竟什么不起作用？

更新

我的猜测不太对劲。在您显示的代码中，没有id =“newnavigation”来匹配#newnavigation css选择器。

Answer 6

您还可以使用以下子选择器：#navigation＆gt;利

所以只有外部的李风格。

请注意，IE6及以下版本不支持子选择器。

如何更改嵌套列表项的CSS样式？

6 个答案: