用于计算列表项的CSS if/else语句

我需要一个if/else语句为我的CSS，它可以计数列表项。这可能吗

基本上我想说的是，如果列表项少于10个，UL容器应该是200px宽，如果列表项多于10个，它应该是400px宽。差不多吧

能做到吗

---

我希望在JSFIDLE上有一个可用的演示，这样我就可以看到可用的代码，而且对于将来看这里的人来说，这样他们就可以看到一个可用的示例以及如何操作：）

CSS没有

if-else

语句。使用jQuery可以很容易地做到这一点。另一种选择是使用较少的或SCS。

CSS没有

if-else

语句。使用jQuery可以很容易地做到这一点。另一个选择是使用更少或SCS。

简短回答：不。CSS不提供有条件的支持

---

长答案：当列表中有超过10个项目（或元素）时，您需要使用javascript或服务器端语言添加一个类，或者对于javascript，在加载样式后直接操作样式。

短答案：否。CSS不提供条件支持

---

详细回答：当列表中有超过10个项目（或元素）时，您需要使用javascript或服务器端语言添加一个类，或者在javascript的情况下，在加载样式后直接操作样式。

这对于CSS来说是不可能的。CSS规范中没有逻辑上的if/else语句。下一个最佳选择可能是javascript。使用jQuery可以通过以下代码实现这一点：

if($('ul#target-list li').length < 10) {
    $('ul#target-list').css('width', 200);
}
else {
    $('ul#target-list').css('width', 400);
}

if（$（'ul#目标列表li'）。长度<10）{
$（'ul#target list'）.css（'width'，200）；
}
否则{
$（'ul#target list'）.css（'width'，400）；
}

这听起来对CSS来说是不可能的。CSS规范中没有逻辑上的if/else语句。下一个最佳选择可能是javascript。使用jQuery可以通过以下代码实现这一点：

if($('ul#target-list li').length < 10) {
    $('ul#target-list').css('width', 200);
}
else {
    $('ul#target-list').css('width', 400);
}

if（$（'ul#目标列表li'）。长度<10）{
$（'ul#target list'）.css（'width'，200）；
}
否则{
$（'ul#target list'）.css（'width'，400）；
}

CSS只处理样式，而不动态处理（除非有JS的帮助）。您可以使用。为了确保这一点，请在最后一次加载，就在

（函数resize（）{
//获取具有选定名称的所有列表
var list=document.getElementsByClassName（'myList'）；
//循环浏览所有收集的列表
对于（i=0；i

CSS只处理样式，而不动态处理（除非有JS的帮助）。您可以使用。为了确保这一点，请在最后一次加载，就在

（函数resize（）{
//获取具有选定名称的所有列表
var list=document.getElementsByClassName（'myList'）；
//循环浏览所有收集的列表
对于（i=0；i

纯CSS3解决方案 如果您只想支持CSS3，那么这就是您所需要的：

li {
   width: 200px;
}

li:nth-last-child(n+11),
li:nth-last-child(n+11) ~ li {
   width: 400px;
}

但是您需要使

ul

或其一，以便宽度由

li

元素本身控制。这可能需要您包装，以便它仍然是页面流中的块元素（如果需要）。

Pure CSS3解决方案 如果您只想支持CSS3，那么这就是您所需要的：

li {
   width: 200px;
}

li:nth-last-child(n+11),
li:nth-last-child(n+11) ~ li {
   width: 400px;
}

---

但是您需要使

ul

或其一，以便宽度由

li

元素本身控制。这可能需要您包装，以便它仍然是页面流中的一个块元素（如果需要）。

如果LESS/SCSS可以做到这一点，CSS也可以做到，因为这两个元素是编译成的。除非你使用一个JS实现，它可能有类似的功能，但我没有听说过任何JS实现，而且它们实际上并不适合生产使用。嗯，是的，在这种情况下，你可能需要JS。这更像是动态css的通用解决方案。SCS可以做

if-else

LESS可以做JS评估。如果LESS/SCSS可以做，CSS也可以做，因为这两个都是编译成的。除非你使用一个JS实现，它可能有类似的功能，但我没有听说过任何JS实现，而且它们实际上并不适合生产使用。嗯，是的，在这种情况下，你可能需要JS。这更像是动态css的通用解决方案。SCS可以做

if-else

一个更少的可以做JS评估。可能有一个css解决方案，但这取决于您对这些列表项的意图。列表项本身是否变得更宽？它们是靠在一起漂浮的吗？如果列表变得更宽，李的期望行为是什么？我刚刚发布了一个答案，假设只是一个

width

更改。可能有一个css解决方案，但这取决于您对这些列表项的意图。列表项本身是否变得更宽？它们是靠在一起漂浮的吗？如果列表变宽了，李的期望行为是什么？我刚刚发布了一个答案，假设只是一个

width

更改。我尝试了这个方法，但没有成功。您可以在JSFIDLE上发布一个演示吗？是否可以让它修改ul.myList宽度而不是列表项本身？我希望列表项总是200px宽。但是当UL容器变为400px宽度时，它将显示列表项s