Question

我需要一个可以计算列表项的CSS的if / else语句。这有可能吗？

基本上我想说，如果列表项少于10个，则UL容器宽度应为200px，并且列表项超过10个，宽度应为400px。这样的事情。

可以吗？

我很感激jsFiddle上的一个工作演示，所以我可以看到工作代码，以及将来看到这里的所有人，这样他们就可以看到一个工作示例以及如何做到这一点：）

Answer 1

CSS没有if else个语句。您可以使用jQuery轻松完成此操作。另一种选择是使用LESS或SCSS。

Answer 2

简答：不。 CSS没有条件支持。

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

Answer 3

CSS仅执行样式，但不动态（除非在JS的帮助下）。您可以使用the following JS snippet完成任务。只是为了确保在最后一次加载，</body>

之前

<script type="text/javascript">

(function resize() { 

    //get all lists with selected name
    var lists = document.getElementsByClassName('myList');

    //loop through all gathered lists
    for (i = 0; i < lists.length; i++) {

        //shorthand elements for easy use
        var list = lists[i];
        var items = list.getElementsByTagName('li');

        //append class names
        list.className = (items.length < 10) ? 'myList less' : 'myList more';
    }
}())

</script>

.less{
    width:200px;
}
.more{
    width:400px;
}

Answer 4

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);
}

Answer 5

纯CSS3解决方案

如果您只想支持CSS3，那么这可以满足您的需求：

li {
   width: 200px;
}

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

但您需要ul display: inline-block或float，以便宽度由li元素本身控制。这可能需要您包装ul (display: inline-block) in a div，以便在需要时它仍然是页面流中的块元素。

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

5 个答案:

纯CSS3解决方案