[ng\:cloak] [ng-cloak] 选择器的用途是什么（包含在 Spring Boot 安全教程中）？答案

【问题标题】：What is the purpose of [ng\:cloak] [ng-cloak] selectors (Contained in Spring Boot Security Tutorial)?[ng\:cloak] [ng-cloak] 选择器的用途是什么（包含在 Spring Boot 安全教程中）？
【发布时间】：2016-10-04 05:25:16
【问题描述】：

我正在阅读 Spring Boot 教程，其中包含一个带有以下 css 的示例：

    <style type="text/css">
    [ng\:cloak], [ng-cloak], .ng-cloak {
      display: none !important;
    }
    </style>
    </head>

    <body ng-app="hello">
      <div class="container">
        <h1>Greeting</h1>
        <div ng-controller="home" ng-cloak class="ng-cloak">

我不明白斗篷类的用途。我只是想知道前两个看起来很奇怪的选择器的目的是什么？

TIA, 奥莱

【问题讨论】：

它们是属性选择器。只是意味着 css 正在寻找属性名称（也包括指令），而不仅仅是类。

标签： css angularjs spring-security spring-boot

【解决方案1】：

来自角度documentation：

ngCloak 指令用于防止 Angular html 模板在加载应用程序时被浏览器以原始（未编译）形式短暂显示。使用该指令可以避免 html 模板显示引起的不良闪烁效果。

这是通过将您提到的css规则添加到页面来完成的，其中[ng-cloak] - 是一个attribute selector，它通过属性而不是类、id或元素名称匹配元素：

<div ng-cloak>...</div>

编辑：

在 css 规则中使用哪个选择器取决于您在 html 标记中使用的语法。相同的指令可能会以不同的方式触发——通过元素名、类名或属性名。您可以通过这种方式启用此指令<div ng:cloak></div>。那么只在你的css中有[ng\:cloak]选择器就足够了。

ngCloak 指令的目的是在编译结束后删除ng-cloak 类和属性（从而使元素可见）。

【讨论】：

如果 class="ng-cloak" 被取消，它还能工作吗？此外，选择器 [ng\:cloak] 看起来根本没有被使用....？
@Ole，我已将您问题的答案添加到帖子中。
谢谢-我仍然对 :cloak 伪选择器感到困惑 WRT ...它似乎不是真正的 css 伪选择器 ...就像 a:visited ...那么这行得通？浏览器的 CSS 引擎会自动触发像 ng:cloak 这样的自定义伪选择器吗？