为了账号安全,请及时绑定邮箱和手机立即绑定

嵌套CSS类

/ 猿问

嵌套CSS类

蓝山帝景 2019-08-19 17:02:56

嵌套CSS类

我可以做以下的事情吗?

.class1{some stuff}.class2{class1;some more stuff}


查看完整描述

3 回答

?
largeQ

使用vanilla CSS是不可能的。但是你可以使用类似的东西:

Sass让CSS再次变得有趣。Sass是CSS3的扩展,添加了嵌套规则,变量,mixins,选择器继承等等。它使用命令行工具或web框架插件转换为格式良好的标准CSS。

要么

在Less中,您可以简单地将选择器嵌套在其他选择器中,而不是构造长选择器名称来指定继承。这使得继承清晰,样式表更短。

例:

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }}


查看完整回答
反对 回复 2019-08-19
?
SMILET

 CSS 3级嵌套有一个CSS3规范。这是目前的草案。 https://tabatkins.github.io/specs/css-nesting/

更新2(2019):我们现在有一个CSSWG草案 https://drafts.csswg.org/css-nesting-1/

如果获得批准,语法将如下所示:

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }}.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }}.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }}

现状: 2015年原始规范提案未经工作组批准。


查看完整回答
反对 回复 2019-08-19
?
牧羊人nacy

不是纯CSS。最接近的是这个:

.class1, .class2 {
    some stuff}.class2 {
    some more stuff}


查看完整回答
反对 回复 2019-08-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信