层叠样式表/伪元素和伪类

语法

使用 :: 符号（双冒号符号）来表示伪元素（::first-line, ::first-letter, ::before, ::after 等），以区别于伪类（:active, :hover, :focus, :link, :visited, :first-child 等）。为了与 IE6/7 兼容，对两者都使用单冒号符号，或者使用 IE 特定的样式。

伪点击

当不需要传递数据时，使用 :active 代替 onclick 事件，使用 :hover 代替 onmouseover 事件

使用与背景色相同的边框色作为默认值，然后在悬停状态下将其更改以创建悬停效果，而不会移动内容。将所需的填充值减少边框的大小，以调整它始终隐藏在背景中，而不是动态插入和删除。

使用 a:active, a:focus{outline:0;width:0;height:0;} 来移除点击链接周围的虚线

使用 :link,:visited 来设置链接的样式，而无需设置命名锚标记的样式

在链接标签中添加绝对定位的元素，并在悬停定义中引用它们（例如 A:hover span{...}），以创建无 JavaScript 的悬停下拉菜单

对所有外部链接使用 rel="external"，以及 a[rel~="external"] { target-new: tab; } （CSS3 属性选择器）在新的标签页中打开链接

命中检测

使用光标样式、透明边框和图像地图来扩展链接的点击区域，以覆盖其父元素的尺寸，而无需使用 JavaScript

如果容器具有布局（固定宽度/高度，内联块，浮动），那么其中的块级锚将不会有正确的命中检测，除非其中一个链接也包含一个布局触发器（缩放，内联块，固定高度）本身或子元素，或者包含一个图像作为子元素。块级锚本身的布局可能会导致边距消失，因此在这种情况下避免使用垂直边距

如果一个块级链接被绝对定位在内容之上，它将不会有正确的命中检测，除非它有一个定义的背景。可以使背景透明或使用不透明度使内容可见

使用 "ul > li{...}" 代替 "ul li{...}" 来只定位标签的第一级子元素，而不是所有嵌套的后代（CSS2 子元素选择器）

元素定位

使用 { target-name: modal; } （CSS3 属性选择器）在模态框中打开链接

使用 "a[href=http://abcxyz]" 来定位具有特定属性值的元素（CSS2 属性选择器）