CSS属性选择器角色* =用户

Question

任何人都可以向我解释以下CSS选择器的目标是什么？

[role*=user] > article a:not([href^=stage]) { 
    /* some rules here */ 
}

Answer 1

选择器定位到其锚点[a]的属性不是以href [[stage]开头的锚标记[:not([href^=stage])]；在article内部，>是元素的role属性包含user的元素的直接子元素[role*=user] > article a:not([href^=stage]) { color: fuchsia; }。

在下面的示例中，我用粉红色的颜色设置了目标的样式，以便它可以使您了解选择了哪些元素：

<div role="user">
  <article>
    <a href="stage">loren</a> ipsum dolor <a href="not-stage">sit amet</a>
  </article>
</div>

<Key-1>