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

Question

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

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

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

因此，当我执行此操作时，我的期望是该影响将在内的inputAND上发生。取而代之的是，这还不够格，只是选择所有，。为什么？除了将它们分开之外，如何避免这种情况。textarea#parent_idparent_idinputtextarea

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/）。

matchs-any伪类：matches（）是一个功能性伪类，将选择器列表作为其参数。它表示由其参数表示的元素。

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

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

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