::first-letter

可以选中第一个字母/文字，有的网页首字母放大的效果就是这么做的。

::first-line

可以选中元素中第一行的文字。

注意，如果浏览器尺寸变化了，第一行的文字可能会变化

::selection

选中被用户框选的文字。默认其实是蓝色背景+白色文字。

更多选择器可参照 CSS 3 教程

其他 CSS 属性

opacity

这个属性可以用于设置整个元素的透明度，包括其子元素，内容，边框等等。

opacity 的取值为 0 到 1，默认值为 1，表示完全不透明，如果要让一个元素完全透明，则将其设置为 0。

至此，我们设置透明的两种办法，一种是 rgba 的颜色值，一种是 opacity 属性，这里有必要做一个区分。

如果我将一个元素的背景颜色设置为 rgba，第四个参数为 alpha 通道，这个通道可以让这个元素的背景有一个透明效果，但其内容本身不会透明，只有背景颜色可以有透明。但是 opacity 属性可以将整个元素，包括其内容、子元素这些都变为透明。当然，rgba 实际上也是一种颜色，只不过是一种半透明的颜色，不仅可以用于背景颜色，还可以用于文字颜色等任何需要颜色的地方。

opacity:0，此时元素完全透明，但不同于 display:none，透明度变为 0 只是看不到，但元素本身还是存在的，而 display:none 则是把整个盒子都干没了。

cursor

改属性可以用来设置鼠标样式，这个属性的具体取值可以参考：cursor - CSS：层叠样式表 | MDN。这里只介绍用法和效果。

正常情况下，鼠标悬浮在一个元素上的时候，鼠标样式其实是不会改变的，但如果我们观察 a 元素，当我们悬停在 a 元素上面的时候，鼠标样式变成了一个小手，这就是 cursor 属性干的事，cursor 属性用于指定鼠标悬停在该元素之上的时候的鼠标样式。浏览器的默认样式表一般会将 a 元素的 cursor 属性设置为 pointer，所以鼠标悬停在 a 元素上的时候才会显示一个小手。

该元素的默认值为 auto，即让浏览器自动控制。我们知道，对于文本内容，我们鼠标样式其实是：，但是默认情况我们的鼠标样式其实是 ，这种就是浏览器默认控制。但 a 元素不是，a 元素是浏览器默认样式表中将其 cursor 设置为了 pointer，并不是浏览器默认控制的。

cursor 还可以将鼠标样式设置为指定图片，将 cursor 的值设置为 url(图片路径) 即可，值得注意的是，一般来说，我们并不会将 jpeg 或者 png 这种格式的图片设置为鼠标样式，一般用于设置鼠标样式的图片都是 ico 为后缀的文件。例如 cursor:url(imgs/target.ico)，这里就将一张图片设置为了鼠标样式。当然，设置图片的时候，为了防止图片失效，我们可以这样写：cursor:url(imgs/target.ico),auto，这样写之后，当第一个图片失效，就会使用 auto，也就是浏览器默认鼠标样式。

盒子的隐藏和显示

将元素的 display 属性设置为 none，就可以隐藏该盒子，甚至都不会渲染出来，所以可能影响其他盒子的排版。

另一种隐藏盒子的方式是 visibility:hidden，这个属性默认是为 visible，这个属性可以让元素隐藏，但并不会消失。如果读者将 display:none 理解为不占据空间的彻底消失，那么就可以将这个属性理解为占据空间版的彻底消失。

visibility 设置为 hidden 不同于 opacity 设置为 0，注意，opacity 设置为 0 只是设置透明度，这个盒子本身依然存在，包括事件也都会存在。但是 visibility 设置为 hidden 之后，这个盒子已经消失了，也就是它原来占据的空间变成空了，但是不同于 display 的 none，它不会释放自己占据的空间。

背景图

我们已经知道，一个盒子的背景可以设置为一个颜色，甚至可以设置一个半透明的颜色，盒子的背景其实不止可以设置为颜色，还可以设置为背景图片。

这里读者或许有疑问，HTML 中的 img 元素其实完全可以替代背景图的功能。这里就涉及到一个问题，就是什么时候用 img，什么时候用背景图。

img 元素是 HTML 的范畴，背景图则是 CSS 的范畴

一般来说，如果这张图片是网站内容的一部分，就使用 img 元素。如果这张图是起美化作用，就使用背景图。

设置背景图片的方式，最简单的其实就是 background-image 属性，使用 url(图片路径) 函数传入一个图片路径，就可以实现背景图片的效果。

背景图有很多需要注意的地方，首先，背景图的大小和 img 元素不同，背景图的大小不会随着盒子的宽高自适应，如果一张图片没有铺满，就会不断重复。


可以看到，当我给这个盒子设置了背景图片之后，由于盒子过大，一张图片不能填满盒子，这个时候就会重复。所以其实我们可以这么说，默认情况下，背景图片一定会覆盖整个盒子的区域，如果一张背景图过小，无法将整个盒子覆盖完，此时背景图片就会重复平铺。

这个效果其实并不一定是我们想要的，有时候我们只需要一张背景图片，不希望它这样重复，我们就可以使用 background-repeat 属性，这个属性默认值为 repeat，即平铺，将其修改为 no-repeat 就可以阻止这种平铺行为。

其实我们可以发现，这种重复行为是有两个方向的，分别是横向重复和纵向重复，其实可以单独控制，repeat-x 就是只在横向平铺，repeat-y 就是只在纵向平铺。

实际上，很多背景图案都是一个很小的图，通过这样不断重复得到的，如下面的背景：


由于背景图不会像图片那样，根据宽高变化，把一张图片设置为背景图片的时候，背景图片的尺寸就是原始尺寸，这有时候并不是我们想要的效果，有时候我们希望手动设置背景图片的尺寸。

设置背景图片的大小，可以使用 background-size 设置，这个属性有几个预设值，如果值为 cover，表示一张图片填满整个区域，但背景图片本身可能并不能完全展示，如果值为 contain，表示保证至少一张背景图片可以完整展示在容器中。不管是 cover 还是 contain，都保证图片比例不变，即不拉伸。

我们也可以传入两个值，强制设置图像的宽高，即 background-size:100px 200px; 就将背景图片的宽高设置为了 100 像素宽，200 像素高，当然这个数值也可以是百分比。

如果只设置一个数值，或者只设置一个百分比，则设置的是宽度，高度则是保持图片比例的自适应缩放。

当然，我们也可以设置背景图片的位置，使用 background-position 属性，如果设置为 center，则表示横向、纵向都居中。也可以使用 center top 来设置横向居中，纵向靠上。即第一个参数设置横向位置，第二个参数设置纵向位置。我们可以使用 right, left, top, bottom, center 这些预设值，也可以设置数值或者百分比。当设置数值的时候，相当于就是坐标系中的一个定位。

当 background-position 属性设置为数值的时候，可以为负数。

这个 background-position 属性非常有用，常用于精灵图，什么叫精灵图呢，网页中可能会存在非常多零散的小图片，这会产生非常多的小图片文件，这并不友好，我们可能会将它放在一个很大的图片里面，如下图所示：


上图就是一个精灵图，由很多个小图拼起来的，这样就可以把很多小文件放在同一张图片上，每当我需要使用小图标的时候，就使用这一张图片作为背景图，然后使用 background-position 属性设置背景图片的位置。

接下来是 background-attachment 属性，这个属性是设置背景图片是否固定。也就是针对有滚动条的情况。

这个属性可以参考 03.border

background-color 和 background-image 可以同时使用，background-image 会覆盖掉 background-color。

background 属性是一个速写属性，但形如 background-position 和 background-size 这类属性并不建议写到速写属性中去，因为这两个属性可以写数值，如果硬要写进去，需要先写 background-position，然后使用 / 隔开，书写 background-size。