Question

只有在存在奇数个子元素时才可以为子元素赋予特定样式吗？让我详细说明一下。

我有一个

<ul>

标记，用

作为动态填充数据

<li>

子节点。我想将样式应用于最后一个元素，比如说只有3个子节点存在或者有奇数。我目前的要求仅适用于三个子节点。我知道可以使用JavaScript轻松完成，但我需要一个纯CSS解决方案。

Answer 1

您可以合并:nth-last-child()和:nth-child()

li:nth-last-child(1):nth-child(odd)  {
  background-color: red;
}

＆＃13;

li:nth-last-child(1):nth-child(odd) {
  background-color: red;
}

＆＃13;

<ul>
  <li>x</li>
  <li>x</li>
  <li>x</li>
</ul>

＆＃13;

VS

＆＃13;

li:nth-last-child(1):nth-child(odd) {
  background-color: red;
}

＆＃13;

<ul>
  <li>x</li>
  <li>x</li>
  <li>x</li>
  <li>x</li>
</ul>

＆＃13;

Answer 2

您可以将:last-child pseudo-class与:nth-child选择器相结合来实现此目的。

要仅在存在特定数量的元素时选择最后一个元素，请将该数字用于:nth-child：

＆＃13;

*{color:#fff;font-family:sans-serif;font-size:14px;list-style:none;margin:0;padding:0;}
li{
  background:#000;
  height:20px;
  line-height:20px;
  margin:2px;
  padding:0 2px;
}
li:last-child:nth-child(3){
  background:#f00;
}
hr{margin:10px 2px;}

＆＃13;

<ul><li></li><li></li><li>I'm red</li></ul>
<hr>
<ul><li></li><li></li><li></li><li>I'm not</li></ul>

＆＃13;

要仅在存在奇数个元素时选择最后一个元素，请对odd使用:nth-child：

＆＃13;

*{color:#fff;font-family:sans-serif;font-size:14px;list-style:none;margin:0;padding:0;}
li{
  background:#000;
  height:20px;
  line-height:20px;
  margin:2px;
  padding:0 2px;
}
li:last-child:nth-child(odd){
  background:#f00;
}
hr{margin:10px 2px;}

＆＃13;

<ul><li></li><li></li><li>I'm red</li></ul>
<hr>
<ul><li></li><li></li><li></li><li>I'm not</li></ul>

＆＃13;

条件CSS可能吗？

2 个答案: