CSS黑客(技巧)

Question

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

在Jeremy Keiths网站上,他使用以下代码:

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

我以前从未见过这个,还有一些我看过的代码(可以被认为是"技巧"),这是我以前从未见过的.

除了询问上述代码的含义之外,我的问题是 - 是否有任何文档,书籍或博客可以了解高级/不太知名的CSS"技巧"？

Answer 1

以上目标是具有角色属性的元素,例如:

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

一个类在这里也有意义,但它只是另一种方式.属性选择器是CSS2的标准部分,但当时IE6不支持它们,所以它直到最近才被使用.

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

Answer 2

在这个例子中，<nav>将包装在 a 中<div>，然后分配一个navigation角色。同样可以通过以下方式实现

nav a {}

许多网站似乎将“一点点”HTML5 与 XHTML 混合在一起。我真的不明白为什么他们不“完全”使用 HTML5。HTML5 的重点是更加语义化，并编写更少的代码，从而更有意义。

一些有用的链接。

到目前为止，您需要一些 JavaScript 才能使 HTML5 元素在 IE 中工作。这些链接应该有帮助