执行“类型”的上下文规则;选择器也适用于“class”; & 'id' CSS 中的选择器?

发布于 2024-12-07 17:36:46 字数 581 浏览 0 评论 0原文

我是 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

我偏爱纯白色 2024-12-14 17:36:46
  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

  1. Yes, it is the same thing for class selectors.
  2. Yes, the contextual rules that apply to type selectors will also apply to class selectors.
  3. Yes, they will also be applicable to 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.

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 class x-border-box.

终遇你 2024-12-14 17:36:46

是的,它们的工作原理是一样的。它们都是简单的选择器。

Yes, they work the same. They're all simple selectors.

予囚 2024-12-14 17:36:46

Q1)通过以下方式创建选择器的效果如何:

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

将更改嵌套在 test1 类中的 test2 类元素的 background-color

所以是的。

Q2)如果是,那么所有上下文规则(+,>)等...
“类型”选择器也适用于类选择器?

是的,他们适用。但也有细微的差别。

例如,上面的规则与 .test1 > 接近相同。 .test2。它针对的是 .test1 的直接子级,而第一个规则(仅包含类)将针对 .test1 的任何 .test2 后代。 ,无论谁嵌套。

Q3)所有这些规则是否也适用于“id”
选择器?

是的,idclass 的工作方式相同,但 id 的目标是特定的、唯一的元素,并且类可以应用于多个元素。

Q1) What is the effect of creating selectors in the following way:

.test1 .test2{
background:red; }

This will change the background-color of an element with the class of test2 that is nested within the class of test1.

So yes.

Q2) If yes, then will all the contextual rules (+, >) etc.. for the
'type' selector will also apply for class selectors?

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 .test2 descendent of a .test1, no matter who nested.

Q3) And will all these rules also be then applicable to the 'id'
selectors?

Yes, id and class work the same way, expect that id targets a specific, unique element and class can be applied to multiple elements.

记忆里有你的影子 2024-12-14 17:36:46

您可以混合搭配。所以像这样:

#header h1.main a

意味着;任何 a 元素,即类名为“main”的 h1 元素的后代,它也是任何 ID 为“header”的元素的后代。请注意,您可以将 #header 替换为 *#header (尽管我不会这样做)

You can just mix and match. So something like this:

#header h1.main a

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)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文