[英]Nested CSS styles?
Is something like this possible? 这样的事情可能吗?
.imgbox:hover{ .ui-resizable-se { /*some style */ } }
Or a conceptual equivalent? 还是概念上的等效? Basically, only when an element of a certain class is hovered over, then some element within that class should change some style.
基本上,只有当某一类的元素上空盘旋,然后这个类中的一些元素应该改变一些风格。
You can do this: 你可以这样做:
.imgbox:hover .ui-resizable-se { /*some style */ }
The same can be generated by LESS or SASS. LESS或SASS可以生成相同的内容。
当然可以是:
.imgbox:hover .ui-resizable-se { /*some style */ }
No, CSS does not allow nesting. 不,CSS不允许嵌套。 You'd have to write it like this:
您必须这样写:
.imgbox:hover .ui-resizable-se { /*some style */ }
However, there are various CSS preprocessors available which convert something like this in valid CSS. 但是,有许多可用的CSS预处理器可以在有效的CSS中转换类似的内容。 The most popular ones are LESS and SASS/SCSS .
最受欢迎的是LESS和SASS / SCSS 。
Not with plain CSS but you can with a CSS preprocessor like Sass: 不是使用普通CSS,而是可以使用Sass这样的CSS预处理器:
http://sass-lang.com/ http://sass-lang.com/
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Generates: 产生:
/* CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.