Css 定义要应用于其他样式的选择器

我对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版本。有人能帮我吗？

你的Less问题的答案是-是的，这在Less中是可能的。您可以将选择器指定给变量，然后通过使用它。以下是一个例子：

#左{
背景色：红色；
&：not（：空）{
字体大小：20px；
背景颜色：绿色；
}
}
#对{
字体大小：15px；
@{left empty}+&{/*将形成#left:not（：empty）+right*/
字体大小：23px；
}
/*根据HTML结构，您可以使用相邻同级选择器（+）或常规同级选择器（~）*/
@{left empty}~&{/*将形成#left:not（：empty）~#right*/
颜色：红色；
}
}
@左空：e（“#左：不（：空）”）；/*e（）去掉引号*/

如注释中最多七个阶段所述，如果您希望

@不为空：#left:not（：empty）

计算为布尔值true或false，并像使用

条件一样使用它，如果

条件较少，则不可能。Less不知道HTML文件的内容

---

请注意，要使编译后的CSS真正工作，您的HTML结构应该是正确的。在CSS中，只有满足以下条件之一时，才能基于另一个元素设置一个元素的样式：

要设置样式的元素（

#right

）是引用元素（

#left

）的子元素或子元素。我排除这种情况，因为如果它确实是一个孩子，那么

#left

将自动不为空

要设置样式的元素（

#right

）是引用元素（

#left

）的直接/直接下一个同级元素。如果是，则使用

+

选择器

要设置样式的元素（

#right

）是引用元素（

#left

）的同级元素（紧挨着或不紧挨着）。如果是，则使用

~

选择器

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

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

#左{
背景色：红色；
}
#左：非（：空）{
字体大小：20px；
背景颜色：绿色；
}
#对{
字体大小：15px；
}
#左：非（：空）+右{
字体大小：23px；
}
#左：不（：空）~#右{
颜色：红色；
}

一些文本
一些文本

其他一些文本
一些文本

一些文本

左和右之间的关系是什么？他们是亲子还是兄弟姐妹？如果兄弟姐妹（我假设他们是）是

#right

是

#left

的相邻（下一个）兄弟姐妹，答案为+1。但我担心OP实际上认为他的

@不是空的：#left:not（：empty）

将具有某种布尔值（即，如果

#left

不是空的，则为true，就像如果Less可以读取页面的HTML一样）。在这种情况下，可能值得一提的是，该解决方案是一个纯粹的CSS解决方案，除了更少的冗长代码之外，它并没有增加任何魔力。Fair point@seven-phases-max。现在您指出了这一点，我认为实际情况可能就是这样。我也会在回答中提到这一点。嘿，谢谢，这很有效。顺便说一下，#left是#right的兄弟姐妹，#left是来自外部来源的广告。总是很高兴能为@siddhuKantipudi提供帮助。