Question

有时当我看到我喜欢的网站或受尊敬的人的网站时，我会看到源代码并尝试理解它们（正如我们所做的那样）。

在Jeremy Keiths网站上，他使用以下代码：

[role="navigation"] a {
font-weight: bold;
text-decoration: none; }

我以前从未见过这个，还有一些我看过的代码（可以被认为是“技巧”），这是我以前从未见过的。

除了询问上述代码的含义之外，我的问题是 - 是否有任何文档，书籍或博客可以了解高级/鲜为人知的CSS“技巧”？

Answer 1

上述目标是具有角色属性的元素，例如：

<div role="navigation">
  <a href="...">...</a>
</div>

一个类在这里也有意义，但它只是另一种方式。属性选择器是CSS2的标准部分，但是当时IE6 didn't support them因此直到最近才被使用。

还有许多其他类似的选择器已经存在很长时间但由于IE施加的限制而无法使用。有关更多示例，请参阅Quirksmode。

Answer 2

这是一个CSS属性选择器。它说“所有<a>标签是属性为role且值为navigation的元素的后代，应按以下方式设置样式...”

他将其用于accessibility principally和styling only secondarily。

如果您想了解一些关于CSS的最新信息，我建议您css3.info和css3please.com。第一个是新技巧的一个很好的例子来源，第二个让你在浏览器中使用新的东西。除此之外...我发现最好的学习方法是在这里回答问题（当你不确定的时候查看）并结合阅读 - Eric Myers，Paul Irish，{{ 3}} - 所有这些都是学习新事物的好资源。