css - 某些具有相同父级的子级的 CSS 选择器

Question

我正在为某些共享相同父级的元素在 CSS 中编写一些规则。

#parent_id li
#parent_id label, 
#parent_id input, 
#parent_id select { ... }

是否有替代语法可以避免重复父 ID？

Answer 1

不，纯 CSS 中没有，但您可以使用一些 CSS 预处理器，例如：

• 少 CSS http://lesscss.org/
• 萨斯http://sass-lang.com/
• 切换 CSS http://sourceforge.net/projects/switchcss/
• ...或其他

Answer 2

如果您选择的那些元素是父元素中的所有元素，您可以将样式应用于父元素：

#parent_id {
     ....
}

里面的样式应该被继承下来，这样里面的元素也可以得到这些样式。

另一种选择可能是使用通用*选择器：

#parent_id * {
    ....
}

这将影响至少比元素低一级的所有parent_id元素，但不会影响parent_id其本身。如果您有纯文本parent_id不受影响，那么这可能是要使用的。

第三种选择是更改您的 HTML 标记，以便您想要影响的元素具有一个类。然后你的 CSS 可以简单地引用那个类。

（顺便说一句 - 是的，我知道 LESS/SASS/等，但我认为发布与其他人相同的答案没有多大价值）

Answer 3

CSS native 不支持这个。但是你可以使用 SASS/LESS：

#parent_id {
  label, input, select { ... }
}

Answer 4

在简单的 css 中这是不可能的。尝试LESS来实现这一点。