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

Question

我对 Less 还很陌生。

#left(id selector) 标签中有一些来自外部源的动态内容。

这是我的 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 -->