嵌套CSS类？

Question

所以阅读一些角度和CSS，我忘了这究竟是什么意思

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

我知道它正在选择嵌套在css-form类中的输入元素，但是什么时候有类似div.a的东西呢？这只是说div与班级a？

我猜这将是input有ng-invalid和ng-touched（它们似乎是由角度自动设置的，你实际上并没有把它们放在括号中因为它看起来）

关于嵌套，此调用是否正确？

感谢。

Answer 1

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

这个选择器说：

  

目标输入元素，其class属性包含以下两个   值：

     

  
• ng-invalid
  
• ng-touched
  

     

此外，输入必须是带有类的元素的后代   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; }

这个选择器说：

  

具有类ng-touched的目标元素，它们是具有类ng-invalid的输入元素的后代，它们是具有类css-form的元素的后代。

     

（＆＃34;输入元素的后代......＆＃34;大声笑。我知道。这只是一个例子，我们正在谈论CSS，它就是它很晚了，我试图让一点点变暗！...; - ）

W3C参考文献：

• 6.4. Class selectors
• 8.1. Descendant combinator

Answer 2

我认为您的意思是“CSS选择器”，这些是用于选择要设置样式的元素的模式。

div.a可以解释为选择div

的所有class="a"元素

您可以参考w3school - CSS Selectors了解详情。