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

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

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

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

因此，当我这样做时，我的期望是在input中的textarea和#parent_id上会发生这种影响。相反，这会取消parent_id的资格，仅选择所有input，textarea。为什么？除了将它们分开之外，如何避免这种情况。

最佳答案

在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/)。



因此，在您的情况下，它将是:

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

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

关于css - 为什么将逗号选择器放在空间选择器中会破坏父级？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37038553/