CSS / LESS如果多于一个元素

时间:2013-09-05 12:59:57

标签: css css3 if-statement less

有没有办法,有一个if类似的语法,我可以检查(例如)有超过input[type="text"]

类似的东西:

.my-element >= 1 {
   border: 1px solid red; // Each .my-element will have a red border
}

.my-lement == 1 {
   border: 1px solid green; // The only .my-element will have a green border
}

在javascript中我会做类似的事情:

if ($('input[type="text"]').length >= 1)

我在标题中提到了LESS,因为我用LESS语法编写了我的css代码

2 个答案:

答案 0 :(得分:2)

,在CSS中没有if else。使用JavaScript动态更改css

在获得一次投票后,我记得有些人在没有留下任何评论的情况下投票给你。:)所以,让我更清楚地回答。

if语句 <{1}}。但是这种语言支持保护表达,这可能有助于模仿一些if语句。

Check this tutorial

答案 1 :(得分:2)

在某些情况下,你可以近似这一点(虽然它需要一个最新的浏览器,符合CSS3):

input {
    border-color: #f00;
}

input:only-of-type {
    border-color: #0f0;
}

JS Fiddle demo

上述方法假设您尝试将input元素设置为 input元素(或“该类型的元素”),其父级的子级(它没有相同input元素类型的兄弟)。

但是,如果您尝试根据元素是否具有任何兄弟元素而对元素进行不同的样式设置,则可以使用:

input {
    border-color: #f00;
}

input:only-child {
    border-color: #0f0;
} 

JS Fiddle demo

参考文献: