css - 是否有相同类别但不同 ID 的条件语句？

Question

在 SASS 或 SCSS 中是否有一种用于跟随 HTML 元素的条件语句？

<div class="header" id="1">
<div class="header" id="2">

我找到了这个解决方案: Different Styles for same class name but different id

但这似乎是传统的解决方案，我的印象是这样的语法:

.header{
    [if #1]{

   }
   [else if #2]{

   }
}

如果不存在这样的语法，我想知道这样的实现有什么问题？

谢谢!

Answer 1

选择器本身由条件语句组成。由于 ID 和类位于同一元素上，因此按照正常情况使用 & 连接选择器:

.header{
   &#\1 {
   }

   &#\2 {
   }
}

尽管将 ID 选择器附加到类选择器可能看起来很奇怪，但它是完全有效的。 ID 选择器不必像类型或通用选择器那样位于复合选择器的开头。但如果它仍然以错误的方式惹恼你，那么只使用 ID 选择器而不用类选择器限定它们也没有错(除非那些相同的 ID 在其他地方使用不同，在这种情况下你真的应该重新考虑你的 HTML 结构)。

另请注意，您需要使用反斜杠对数字进行转义，以便识别 ID 选择器，因为 CSS 标识符通常不能以数字开头。