Question

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

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

这不是一个属性选择器吗？

ui-view[content] {}

Answer 1

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

这意味着[ui-view].ng-enter-active和.ng-enter-active[ui-view]都是有效且等效的，匹配具有类＆＃34; ng-enter-active＆＃34;的元素。以及名为＆＃34; ui-view＆＃34;的属性。前者似乎很奇怪，因为你很少看到属性选择器首先出现在一个简单的选择器序列中。

您的第二个示例ui-view[content]包含一个类型选择器ui-view。因此，与第一个示例不同，不能重写为[content]ui-view，因为如上所述，类型选择器必须首先出现。

Answer 2

这是一个属性选择器。它将选择一个既具有ui-view属性又具有类ng-enter-active的元素。该属性选择器不关心属性的实际值。例如，它会正确选择以下内容：

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

以及：

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

Answer 3

它的属性选择器，所以：

第一个

[ui-view].ng-enter-active

表示具有类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

这是什么CSS选择器？ [UI-视图] .ng进入活性

3 个答案: