Chris Coyier

使用一些非标准的伪选择器，您可以在浏览器窗口处于非活动状态时更改元素的样式。目前唯一“实用”的用途是文本选择颜色，除非您覆盖它，否则它会自动执行此操作。但我们会解决这个问题！

想象一个现实生活中的选项卡文件夹。这些选项卡不仅在选项卡顶部是圆角的，而且还通过圆角边缘连接到文件夹。顶部角很容易，只需使用 border-radius。底部角就没那么容易了……

如果您尝试过在 <img> 上使用 border-radius，您就会知道它并不总是有效（即使浏览器支持该 CSS3 属性，例如 Firefox 3 和 Opera 11）。其根本原因在于图像……

使用 CSS 动画（例如 @keyframes），您可能认为“重新启动”它很容易……

这些样式的伪元素的精确（几乎）浏览器支持级别。伙计们，这真的很深入，您可以使用它们做很多很酷的事情，同时保持标记的整洁。

网络奖项现已开放提名。据我所知，它们是网络行业历史最悠久、规模最大的奖项。我认为让个人和团队因其杰出的工作而获得认可是一件好事……

使用“em”作为字体大小的问题之一是它们会级联，因此您总是会编写选择嵌套元素以将其重置回 1em 的规则；CSS3 现在有 rem（“根 em”）来防止此问题……

#foo:checked::before,
input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}

#foo:checked,
input[type="checkbox"] + label::before {
    content: url('checkbox.png');
}

input[type="checkbox"]:checked + label::before {
    content: url('checkbox-checked.png');
}

#foo 不会引用任何特定元素，它纯粹是为了防止浏览器……

您可以在 WebKit 浏览器中自定义滚动条。以下是要了解的 CSS，以及如何完成它的一些示例。