“类型”选择器的上下文规则是否也适用于“类”和“类”。 CSS中的'id'选择器？

Question

我是CSS的新手，面临与上下文选择器相关的问题，如下所示：

Q1）以下列方式创建选择器的作用是什么：

.test1 .test2{
    background:red;
}

这里test1和test2是类选择器。

据我所知，当我们使用'type'选择器这样的结构时，会导致后代的样式。

这对类选择器来说是一样的吗？

Q2）如果是，那么“类型”选择器的所有上下文规则（+，＆gt;）等也将适用于类选择器吗？

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}

但我无法找到这种结构的确切含义。

可以指导这个。

感谢您提前提供任何帮助。

Answer 1

是的，他们的工作方式相同。他们都是简单的选择者。

Answer 2

1. 是的，类选择器也是一样。
2. 是的，适用于类型选择器的上下文规则也适用于类选择器。
3. 是的，它们也适用于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-施胶：边界框}

     

但我无法找到这种结构的确切含义。

这意味着，将该规则应用于具有类x-reset的元素的所有子元素，其直接或任何其他父元素具有类x-border-box。

Answer 3

  

Q1）以下列方式创建选择器的作用是什么：

     

.test1 .test2 {       背景：红色; }

这将更改background-color类的test2，其test1类嵌套在.test1 > .test2类中。

是的。

  

Q2）如果是，那么所有的上下文规则（+，＆gt;）等等   'type'选择器也适用于类选择器？

是的，他们适用。但是存在细微差别。

例如，上述规则与.test1接近。这针对.test2的直接子项，而第一个规则（仅包含类）将针对.test1的任何id后代，无论是谁嵌套。

  

Q3）所有这些规则也适用于'id'   选择器？

是的，class和id的工作方式相同，期望{{1}}定位特定的，唯一的元素和类可以应用于多个元素。

Answer 4

你可以混合搭配。所以像这样：

#header h1.main a

装置;任何a元素，即h1元素的后代，其类名为“main”，它同样是具有ID“header”的任何元素的后代。请注意，您只需将#header替换为*＃header（尽管我不会这样做）