具有相同名称的子类答案

【问题标题】：Child class with same name具有相同名称的子类
【发布时间】：2015-07-23 09:31:44
【问题描述】：

我不太确定这是否是一个问题，或者是否可以完成。我什至不确定我应该用谷歌搜索是否可以完成/如何完成。

我想要做的是有一个与父类具有相同类选择器的子类。我已经在 Less 和 CSS（见下文）中做到了这一点，但我认为这不是最干净的方法。有没有更好或更简洁的方式来“重用”类选择器？

有问题的选择器是

.r-slide-right-10 .r-slide-right-10 { ... }

我有以下 Less 代码

.r-slide-right-10 {
    @media @default-media-small {
        .SlideUp(75);
        .r-slide-right-10 {
            .SlideUpNoOffset(75);
        }
    }
    @media @default-media-medium, @default-media-large {
        .SlideRight(10);
        .r-slide-right-10 {
            .SlideRightNoOffset(10);
        }
    }
}

生成以下 CSS

@media only screen and (max-width: 40.063em ) {
  .r-slide-right-10 {
    height: 75vh;
    bottom: -76vh;
  }
  .r-slide-right-10.r-active {
    -webkit-transform: translate(0, -75vh);
    -moz-transform: translate(0, -75vh);
    transform: translate(0, -75vh);
  }
  .r-slide-right-10 .r-slide-right-10 {
    height: 75vh;
    bottom: -75vh;
  }
  .r-slide-right-10 .r-slide-right-10.r-active {
    -webkit-transform: translate(0, -75vh);
    -moz-transform: translate(0, -75vh);
    transform: translate(0, -75vh);
  }
}
@media only screen and (min-width: 40.063em ), only screen and (min-width: 64.063em ) {
  .r-slide-right-10 {
    width: 10vw;
    right: -11vw;
  }
  .r-slide-right-10.r-active {
    -webkit-transform: translate(-10vw, 0);
    -moz-transform: translate(-10vw, 0);
    transform: translate(-10vw, 0);
  }
  .r-slide-right-10 .r-slide-right-10 {
    width: 10vw;
    right: -10;
  }
  .r-slide-right-10 .r-slide-right-10.r-active {
    -webkit-transform: translate(-10vw, 0);
    -moz-transform: translate(-10vw, 0);
    transform: translate(-10vw, 0);
  }
}

【问题讨论】：

如果这行得通，我不会担心，但如果这些总是第一级的孩子，你可能要考虑使用 ">" css 选择器。
不管类是否相同，它仍然是父级的子级，因此 LESS/对应的 CSS 与我在这种情况下所期望的一样。
它确实按我的意图工作，我不希望 CSS 变得更干净。但我想知道我是否可以至少有一些更干净的 LESS 代码 :) Harry 在下面为我回答了这个问题。如果他们是一级孩子，在这种情况下使用“>”是正确的，但情况并非总是如此:)

标签： css html less media-queries

【解决方案1】：

我个人不太喜欢像您的示例那样重用类名。但是，在 Less 中重新使用选择器来实现您的预期输出是相当简单的。您可以像下面的简化示例一样使用parent selector (&)。

.r-slide-right-10 {
    color: red;
    & & {
        color: blue;
    }
}

上面的 Less 代码在编译后会产生以下 CSS。

.r-slide-right-10 {
  color: red;
}
.r-slide-right-10 .r-slide-right-10 {
  color: blue;
}

【讨论】：

虽然您对父选择器的看法是正确的，但这不会改变输出的 CSS。我不认为它需要改变，只是说这不会对输出产生影响:)
@mattytommo：你是对的。这对 CSS 没有影响，但在我看来会使 Less 代码更清晰。我的回答主要是为了 - 以更简洁的方式“重用”类选择器？ :)
这正是我所要求的，更简洁的代码。这是有道理的，我对 less CSS 场景还很陌生，所以我还不知道所有的选择器。和普通的 CSS 相比，我更喜欢它，现在回想起来，我很厌恶手工做 CSS。
@MightyLampshade：总是乐于提供帮助。不要对手工编码 CSS 感到难过，我想说在使用库之前了解基础总是好的 :)
这让我对编写更具响应性的 CSS 产生了极大的热情，因为我不必以微小的差异重新编写 100 次相同的乱码。