css - 嵌套 CSS 类？

Question

所以读了一些 Angular 和 CSS，我忘记了这到底意味着什么

.css-form input.ng-invalid.ng-touched { color: whatever; }

我知道它正在选择嵌套在 css-form 类中的输入元素，但是当某些内容具有 div.a 之类的内容时该怎么办？这只是说 div 与类 a 吗？

我猜这将是具有类 ng-invalid 和 ng-touched 的 input (它们似乎被设置为自动按 Angular ，你实际上并没有把它们放在括号中，因为它看起来)

这个关于嵌套的调用正确吗？

谢谢。

Answer 1

.css-form input.ng-invalid.ng-touched { color: whatever; }

这个选择器的意思是:

Target input elements whose class attribute contains the following two values:

• ng-invalid
• ng-touched

In addition, the input must be a descendant of an element with class css-form

示例 HTML:

<form class="css-form">
    <input class="ng-invalid">
    <input class="ng-touched">
    <input class="ng-invalid ng-touched">
    <input type="submit">
</form>

上面的 CSS 规则仅针对第三个 input。

请注意，类选择器必须链接在一起(即接触)。即使有一个空格字符，它也会成为后代选择器。

.css-form input.ng-invalid .ng-touched { color: whatever; }

这个选择器说:

Target elements with class ng-touched that are descendants of input elements with class ng-invalid, that are descendants of elements with class css-form.

("descendants of input elements.." LOL. I know. It's just an example, and we're talking CSS, and it's late, and I'm trying to make a point goddamit! ... ;-)

W3C 引用资料:

• 6.4. Class selectors
• 8.1. Descendant combinator