css - 定义选择器以应用于其他样式

Question

我对 Less 还很陌生。

有一些来自外部源的动态内容，它们是#left(id 选择器)标记的一部分。

这是我的 Less 文件:

//can i define anything like this in `less`
@not-empty: #left:not(:empty);

#left {   
  background-color: red;
   &:not(:empty) {
      font-size: 20px; 
      background-color: green;
   }
}

#right {
background-color: blue;
    font-size: 15px;
    #left:not(:empty) {
    font-size: 23px;
   }
}

如果#left不为空，我的预期结果会是这样 字体大小:23px。如果不是，则 #right 字体大小将为 15px。

我使用的是Less V2.5.0版本。谁能帮我解决这个问题吗？

Answer 1

您的 Less 问题的答案是 - 是，Less 是可能的。您可以将选择器分配给变量，然后通过 selector interpolation 使用它。下面是一个例子:

#left{
    background-color: red;
    &:not(:empty){
        font-size: 20px;
        background-color: green;
    }
}

#right{
    font-size: 15px;
    @{left-empty} + &{ /* will form #left:not(:empty) + #right */
        font-size: 23px;
    }

    /* You can use the adjacent sibling selector (+) or the general sibling selector (~) depending on your HTML structure */
    @{left-empty} ~ &{ /* will form #left:not(:empty) ~ #right */
        color: red;
    }
}

@left-empty: e("#left:not(:empty)"); /* e() strips out the quotes */

As mentioned by seven-phases-max in comments, if you are expecting @not-empty: #left:not(:empty); to evaluate to a boolean true or false and use it like an if condition then it wouldn't be possible with Less. Less does not know the contents of your HTML file.

---

请注意，要使编译后的 CSS 真正起作用，您的 HTML 结构应该正确。在 CSS 中，仅当满足以下任一条件时，您才可以根据另一个元素设置一个元素的样式:

1. 要设置样式的元素 (#right) 是引用元素 (#left) 的子元素或孙元素。我排除这种情况，因为如果它确实是一个 child ，那么#left自动不为空。
2. 要设置样式的元素 (#right) 是引用元素 (#left) 的直接/紧邻下一个同级元素。如果是，则使用 + 选择器。
3. 要设置样式的元素 (#right) 是引用元素 (#left) 的同级元素(是否紧邻下一个元素)。如果是，则使用 ~ 选择器。

如果不是以上任何一种，那么您将无法单独使用 CSS 来实现所需的设置。需要 JavaScript 或任何其他库。

下面是有关选择器如何基于标记工作的演示片段。

#left {
  background-color: red;
}
#left:not(:empty) {
  font-size: 20px;
  background-color: green;
}
#right {
  font-size: 15px;
}
#left:not(:empty) + #right {
  font-size: 23px;
}
#left:not(:empty) ~ #right {
  color: red;
}

<div id="left"> <!-- This is not empty -->
  <div id="right">Some text</div>
</div>
<div id="right">Some text</div> <!-- This is the immediate next sibling and a general sibling of the first #left-->

<hr>

<div id="left">Some other text</div> <!-- This is also not empty -->
<div id="right">Some text</div> <!-- This is the immediate next sibling for the second #left and is a general sibling of the first #left -->

<hr>

<div id="left"></div> <!-- This is empty -->
<div id="right">Some text</div> <!-- This is the immediate next sibling for the third #left and is a general sibling of the first and second #left -->