为什么将逗号选择器放在空间选择器中会破坏父级? [英] Why does putting comma selectors inside a space selector break the parent?

问题描述

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

I am used to using descendant space selectors and comma selectors. I have ids around larger sets of elements in order to manipulate them easier in jquery and css.

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

So I tried something like this:

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

因此，当我这样做时，我的期望是在 #parent_id 内的 input 和 textarea 上都将出现这种效果.相反，这会取消 parent_id 的资格，仅选择所有 input ， textarea .为什么?除了将它们分开之外，如何避免这种情况.

So when I do this, my expectation is that this effect will occur on input AND textarea inside the #parent_id. Instead, this disqualifies parent_id and just selects all input, textarea. Why? And how can I avoid this, aside from making them separate.

推荐答案

在CSS中，规则的格式为:

In CSS, rules have the form:

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

因此逗号 用于分隔同一属性集的不同选择器.例如，如果您要为同一属性集使用两个截然不同的选择器.

So the comma , is used to separate different selectors for the same property set. For example, if you wanted two radically different selectors for the same property set.

CSS中的选择器必须是完全合格的，没有上下文相关性-部分原因是CSS被设计为向前兼容的:指示浏览器独立尝试规则中的每个选择器，因此浏览器会优雅地-当遇到不支持的新选择器语法时，性能会降低.

Selectors in CSS must be fully-qualified, there is no contextual-sensitivity - this is partly because CSS is designed to be forward-compatible: browsers are instructed to try each and every selector in a rule independently, so browsers gracefully-degrade when they encounter new selector syntax they don't support.

要获得想要的效果，只需键入更多:)

To get the effect you want just type more :)

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

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

Note that there is a proposed/experimental :matches() selector function which works as a logical OR operator in selectors, it's in the CSS Level 4 Selectors specification (currently in a working-draft state, as of 2016-05-04: https://drafts.csswg.org/selectors-4/ ).

matches-any伪类:matches()是一个功能性伪类，以选择器列表作为参数.它表示由其参数表示的元素.

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.

因此，您的情况应该是:

So in your case it would be:

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

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

But I don't think this usage is really that better, it's less obvious and requires greater knowledge of CSS.

这篇关于为什么将逗号选择器放在空间选择器中会破坏父级?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！