Question

我使用标签＆＃34; border-radius＆＃34;属性。我的网站是RTL方向，这对我的解释是必要的。

当我有3个以上的标签时：

first-child：＆＃34; border-radius＆＃34;仅限右侧。
其他人：＆＃34; border-radius＆＃34;被禁用。
last-child：＆＃34; border-radius＆＃34;仅限左侧。

当我有2个标签时：

first-child：＆＃34; border-radius＆＃34;仅限右侧。
last-child：＆＃34; border-radius＆＃34;仅限左侧。

当我有1个标签时：

第一个孩子和最后一个孩子：＆＃34; border-radius＆＃34;对于右侧和左侧侧。

适用于2个以上的代码：

//ANGEL FOR RIGHT TAG
.TagsLabel .TagLabel:first-child {
    border-radius: 0 @border-radius @border-radius 0 !important;
}

//ANGEL FOR LEFT TAG
.TagsLabel .TagLabel:last-child {
    border-radius: @border-radius 0 0 @border-radius !important;
}

有人可以帮我修复1个标签吗？谢谢:)）

编辑： 这对我有用，谢谢！

//ANGEL FOR SINGLE TAG
.TagsLabel .TagLabel:first-child:last-child {
    border-radius: @border-radius !important;
}

Answer 1

你应该使用border-top-left-radius, border-bottom-left-radius, border-top-right-radius, border-bottom-right-radius 这里的例子：如果需要，您可以反转第一个孩子和最后一个孩子。

@border-radius:10px;

.TagsLabel .TagLabel {
  background:blue;
  color:#fff;
  display:inline-block;
  padding:5px;
}

.TagsLabel .TagLabel:last-child {
    border-top-right-radius: @border-radius !important;
    border-bottom-right-radius: @border-radius !important;
}

//LEFT ANGEL FOR TAG
.TagsLabel .TagLabel:first-child {
    border-top-left-radius: @border-radius !important;
    border-bottom-left-radius: @border-radius !important;
}

然后，当您只有一个标记时，它将采用所有border-radius属性。

此处示例：http://codepen.io/arnogues/pen/KzEdWX

在LESS语言中使用AND条件

1 个答案: