执行“类型”的上下文规则；选择器也适用于“class”； & 'id' CSS 中的选择器？
我是 CSS 新手，面临与上下文选择器相关的问题，如下所示：
Q1）通过以下方式创建选择器的效果是什么：
.test1 .test2{
background:red;
}
这里 test1 和 test2 是类选择器。
我知道，当我们将这种结构与“类型”选择器一起使用时，就会导致后代的样式化。
这对于类选择器来说是一样的吗？
Q2）如果是，那么“类型”选择器的所有上下文规则（+、>）等是否也适用于类选择器？
Q3）所有这些规则也适用于“id”选择器吗？
我在ExtJS等js库的css文件中看到过这种结构的使用
.x-border-box .x-reset *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}
，但我一直无法找到这种结构的确切含义。
对此有任何指导吗？
感谢您提前提供的任何帮助。
I am new to CSS and facing an issue related to contextual selectors as following:
Q1) What is the effect of creating selectors in the following way:
.test1 .test2{
background:red;
}
Here test1 and test2 are the class selectors.
I understand that when we use such structure with 'type' selectors then that leads to styling of descendants.
Is this the same thing for the class selectors?
Q2) If yes, then will all the contextual rules (+, >) etc.. for the 'type' selector will also apply for class selectors?
Q3) And will all these rules also be then applicable to the 'id' selectors?
I have seen the use of such structure in the css files of js libraries like ExtJS
.x-border-box .x-reset *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}
But I have not been able to locate the exact implication of this structure.
Could any guide at this.
Thanks for any help in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这意味着，将该规则应用于具有类
x-reset的元素的所有子元素，其直接或任何进一步的父元素具有类x-border-box。It means, apply that rule to all child elements of the element with the class
x-reset, whose immediate or any further parent has the classx-border-box.是的，它们的工作原理是一样的。它们都是简单的选择器。
Yes, they work the same. They're all simple selectors.
将更改嵌套在
test1类中的test2类元素的background-color。所以是的。
是的，他们适用。但也有细微的差别。
例如，上面的规则与
.test1 > 接近相同。 .test2。它针对的是.test1的直接子级，而第一个规则（仅包含类）将针对.test1的任何.test2后代。 ，无论谁嵌套。是的，
id和class的工作方式相同，但id的目标是特定的、唯一的元素，并且类可以应用于多个元素。This will change the
background-colorof an element with the class oftest2that is nested within the class oftest1.So yes.
Yes, they apply. But there are slight differences.
For instance, the above rule is close to the same as
.test1 > .test2. This targets the direct child of.test1, whereas the first rule (with just the classes) would target any.test2descendent of a.test1, no matter who nested.Yes,
idandclasswork the same way, expect thatidtargets a specific, unique element and class can be applied to multiple elements.您可以混合搭配。所以像这样：
意味着；任何 a 元素，即类名为“main”的 h1 元素的后代，它也是任何 ID 为“header”的元素的后代。请注意，您可以将 #header 替换为 *#header （尽管我不会这样做）
You can just mix and match. So something like this:
Means; any a-element, that is a descendant of a h1 element with a classname that is 'main', that again is a descendant of any element with a ID 'header'. Note that you could just replace #header with *#header (although I would not do that)