这是什么 CSS 选择器？ [ui-view].ng-enter-active

Question

什么CSS选择器是方括号中的第一部分？

[ui-view].ng-enter-active {}

这不是属性选择器吗？

ui-view[content] {}

Answer 1

那是一个属性select或者。它会 select 一个既有 ui-view 属性又有 class ng-enter-active 属性的元素。该属性 selector 不关心属性的实际值。因此，例如，它会正确 select 以下内容：

<div ui-view class="ng-enter-active"></div>

以及：

<div ui-view="valueDoesntMatter" class="ng-enter-active"></div>

Answer 2

它是属性选择器，所以：

第一个

[ui-view].ng-enter-active

表示具有 class ng-enter-active 和属性 ui-view 的元素，例如。

<div class="ng-enter-active" ui-view="abc">
<div class="ng-enter-active" ui-view> <!-- or with attribute without value -->

第二个，

ui-view[content]

表示元素 ui-view（您可能忘记了点，class="ui-view"），属性为 content

<ui-view content="abc">

或者，如果您在选择器

中忘记了 .

<div class="ui-view" content="whatever">

查看有关属性选择器的更多信息：http://quirksmode.org/css/selectors/selector_attribute.html

Answer 3

确实是一个属性选择器。属性选择器和 class 选择器都是 simple selectors，序列中的简单选择器可以按任何顺序排列，但类型或通用选择器（如果存在）必须排在第一位。

这意味着 [ui-view].ng-enter-active 和 .ng-enter-active[ui-view] 都是有效且等效的，匹配具有 class "ng-enter-active" 以及名为 [=25= 的属性的元素].前者一开始看起来很奇怪，只是因为你很少看到属性选择器在一个简单的选择器序列中首先出现。

您的第二个示例 ui-view[content] 包含类型选择器 ui-view。因此，与您的第一个示例不同，它 不能 重写为 [content]ui-view，因为如前所述，类型选择器必须排在第一位。