css - 为什么将逗号选择器放入空格选择器中会破坏父级选择器？

Question

我习惯使用后代空格选择器和逗号选择器。我在较大的元素集周围有 id，以便在 jquery 和 css 中更容易地操作它们。

所以我尝试了这样的事情:

#parent_id input, textarea
{
 width: 100px;
}

因此，当我这样做时，我的期望是这种效果将发生在 #parent_id 内的 input 和 textarea 上。相反，这会取消 parent_id 的资格，并仅选择所有 input、textarea。为什么？除了将它们分开之外，我怎样才能避免这种情况呢？

Answer 1

在 CSS 中，规则的形式为:

selector0 [, selectorN ]*
{
    property0: value0[,
    property1: value1]*
}

因此，逗号 , 用于分隔同一属性集的不同选择器。例如，如果您想要为同一属性集使用两个完全不同的选择器。

CSS 中的选择器必须是完全限定的，没有上下文敏感性 - 这部分是因为 CSS 被设计为向前兼容:浏览器被指示独立尝试规则中的每个选择器，因此浏览器可以优雅地 -当他们遇到不支持的新选择器语法时就会降级。

要获得您想要的效果，只需输入更多内容:)

#parent_id input,
#parent_id textarea {
    width: 100px;
}

请注意，有一个提议/实验性的 :matches() 选择器函数，它在选择器中用作逻辑 OR 运算符，它位于 CSS Level 4 选择器规范中(截至 2016 年 5 月 4 日，目前处于工作草案状态: https://drafts.csswg.org/selectors-4/ )。

The matches-any pseudo-class, :matches(), is a functional pseudo-class taking a selector list as its argument. It represents an element that is represented by its argument.

所以在你的情况下它是:

#parent_id :matches( input, textarea ) {
    width: 100px;
}

但我不认为这种用法真的那么好，它不太明显并且需要更多的 CSS 知识。