减少css选择器问题

时间:2016-09-28 09:49:23

标签: css css-selectors less

我使用较少的CSS并尝试使用&用于组合多个选择器。我已经创建了一个虚拟环境来解决这个问题。

HTML

<div class="ampuse">
    <p>This is first</p>
    <p>This is second</p>
    <div>This is div 1</div>
    <p>This is Third</p>
    <em>This is em</em>
    <div>This is div 2</div>
    <div>This is div 3</div>
</div>

LESS

.ampuse{
    p,div{
        color: red;
        &+&{
            background: yellow;
            color: blue;
        }
    }
}

现在根据较少的规则,这将创建像这样的CSS

.ampuse p,
.ampuse div {
  color: red;
}

.ampuse p + .ampuse p,
.ampuse p + .ampuse div,
.ampuse div + .ampuse p,
.ampuse div + .ampuse div {
  background: yellow;
  color: blue;
}

但我想只渲染一次父,然后选择器应该在children元素下工作。这是我想要的CSS

.ampuse p,
.ampuse div {
  color: red;
}

.ampuse p + p,
.ampuse p + div,
.ampuse div + p,
.ampuse div + div {
  background: yellow;
  color: blue;
}

任何人都可以帮助我以更少的方式实现它吗?

2 个答案:

答案 0 :(得分:2)

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    var token = ""
    for i in 0..<deviceToken.count {
        token = token + String(format: "%02.2hhx", arguments: [deviceToken[i]])
    }
    print(token)
}

使得

.ampuse {
    p,
    div {color: red;
        + p,
        + div {
          background: yellow;
          color: blue;
        }
    }
}

答案 1 :(得分:0)

接受的答案,如我的评论中所述,使用& + p, & + div

.ampuse{
    p,div{
        color: red;

        + p,
        + div {
            background: yellow;
            color: blue;
        }
    }
}