Question

这个让我发疯。

我在bootstrap v3中有标签组件。标签有修饰符，如标签危险（红色），标签成功（绿色）等。需要区分标签是否为链接。

我有两个列表，一个有子元素作为子元素，另一个没有：

<ul id="labels1">
    <li>Success</li>
    <li>Danger</li>

<ul id="labels2">
    <li><a href="#">Success</a></li>
    <li><a href="#">Danger</a></li>
</ul>

接下来就是labels.less，它看起来像这样：

.label {
  display: inline;
  padding: .25em .6em;
  font-size: 75%;
  font-weight: 500;
  color: #fff;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  background-color: @grayLight;
  border-radius: .25em;

  a,
  a:hover,
  a:focus,
  a&,
  a&:hover,
  a&:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
}

.label-danger {
  background-color: @label-danger-bg;
  a& {
    background-color: darken(@label-danger-bg, 10%);
  }
}
.label-success {
  background-color: @label-success-bg;
  a& {
    background-color: darken(@label-success-bg, 10%);
  }
}

接下来就是 - 我有一个LESS主题表，我定义：

#labels1 {
    li {
        .label;
        &:first-child {
            .label-success;
        }
        &:last-child {
            .label-danger;
        }
    }
}

直到这一部分就可以了：

#labels2 {
    li {
        a {
            .label;
        }
        &:first-child {
            a {
                .label-success;
            }
        }
        &:last-child {
            a {
                .label-danger;
            }
        }
    }
}

没有办法告诉LESS我正在为a元素设置样式，因此颜色应该更深。

如果我这样做：

#labels2 {
    li {
        &:first-child {
            .label;
            .label-success;
        }
        //  etc
    }
}

它只会产生正常的颜色（不是那些颜色较深）。

我想要做的是找到LESS中不存在的东西的解决方法（链中的祖父母选择器匹配）：

.label-success {
  background-color: @label-success-bg;
  a {
    && { // go 2 levels up and style the .label-success 
         // if LESS can dig to this rule - eg. if there technically 
         // exists an anchor inside the li.
        background-color: darken(@label-success-bg, 10%);
    }
  }
}

有谁知道该怎么办？

Answer 1

我不相信你需要“＆amp;”在你的规则中。它应该是：

.label-danger {
  background-color: @label-danger-bg;
  a {
    background-color: darken(@label-danger-bg, 10%);
  }
}
.label-success {
  background-color: @label-success-bg;
  a {
    background-color: darken(@label-success-bg, 10%);
  }
}

那么＃labels1的规则应该适用于：

#labels1, #labels2 {
    li {
        .label;
        &:first-child {
            .label-success;
        }
        &:last-child {
            .label-danger;
        }
    }
}

少 - 如果孩子存在，请回到祖父母

1 个答案: