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

Question

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

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

是否有其他语法可以避免重复父ID？

Answer 1

没有纯CSS，但你可以使用一些CSS预处理器，如：

• LESS CSS http://lesscss.org/
• Sass 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原生不支持此功能。但你可以使用SASS / LESS：

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

Answer 4

简单的css是不可能的。请尝试LESS来实现此目标。