为什么在空格选择器中放置逗号选择器会破坏父级？

Question

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

所以我尝试过这样的事情：

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

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

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-05-04：https://drafts.csswg.org/selectors-4/）。

  

matches-any伪类：matches（）是一个以选择器列表作为参数的函数伪类。它表示由其参数表示的元素。

所以在你的情况下，它将是：

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

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