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>