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