0

是否可以将一个 CSS 声明应用于多个 HTML 元素nth-child？

例如，我有一个嵌套列表，我想将背景颜色红色应用于列表项目 1，绿色用于列出项目 2 到 4，蓝色用于列出项目 5 到 8，黄色用于列出项目 9，仅使用 4 个 CSS 声明。

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
      <ul>
         <li><a href="#">Our Team</a></li>
         <li><a href="#">Our Goal</a></li>
      </ul>
  </li>
  <li><a href="#">Media</a>
      <ul>
         <li><a href="#">NLC in the News</a></li>
         <li><a href="#">Photos</a></li>
         <li><a href="#">Videos</a></li>
      </ul>
  </li>
  <li><a href="#">Events</a></li>
</ul>
4

2 回答 2

3

我在这里看到 4 个外部li元素（主页、关于、媒体、事件）。如果这些对应于您所指的 4 个 CSS 声明（实际上是rules:nth-child() ），那么这只是解决方案的一部分：

#nav > li:nth-child(1) {
    background-color: red;
}

#nav > li:nth-child(2), #nav > li:nth-child(2) li {
    background-color: green;
}

#nav > li:nth-child(3), #nav > li:nth-child(3) li {
    background-color: blue;
}

#nav > li:nth-child(4) {
    background-color: yellow;
}

如果您正在寻找适用于第 n 个外部li及其所有子li的公式，那么就是这样：

/* Of course, substitute n with the actual number */
#nav > li:nth-child(n), #nav > li:nth-child(n) li
于 2012-05-11T17:41:29.257 回答
0

使用子组（就像你一样）

好吧，在您的情况下，这更容易，因为它们是分组的。这行得通。

#nav > li:nth-child(1) {background-color: red;}
#nav > li:nth-child(2), 
#nav > li:nth-child(2) > ul > li {background-color: green;}
#nav > li:nth-child(3), 
#nav > li:nth-child(3) > ul > li {background-color: blue;}
#nav > li:nth-child(4) {background-color: yellow;}

对于单个列表（就像其他人可能有的那样）

如果它都是一个 list 也是可能的，但是您需要允许级联来提供帮助。看这个例子：

HTML

<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a></li> 
  <li><a href="#">Our Team</a></li> 
  <li><a href="#">Our Goal</a></li> 
  <li><a href="#">Media</a></li> 
  <li><a href="#">NLC in the News</a></li> 
  <li><a href="#">Photos</a></li> 
  <li><a href="#">Videos</a></li>   
  <li><a href="#">Events</a></li> 
</ul>

CSS

#nav > li:nth-child(1) {background-color: red;} 
#nav > li:nth-child(n+2) {background-color: green;} 
#nav > li:nth-child(n+5) {background-color: blue;} 
#nav > li:nth-child(n+9) {background-color: yellow;}
于 2012-05-11T17:41:00.487 回答