CSS3选择器的使用方法详解，提高Web开发效率和精准度

前言

如同人类的的进化一样，
CSS3是
CSS2的“进化”版本，在
CSS2基础上，增强或新增了许多特性，弥补了
CSS2的众多不足之处，使得
Web开发变得更为高效和便捷。

1.选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。
CSS3选择器与
jQuery中所提供的绝大部分选择器兼容。

1.1 属性选择器

属性选择器就是通过属性来选择元素。

1、[attr]

2、[attr=val]

3、[attr*=val]

4、[attr^=val]

5、[attr$=val]

1.2 伪类选择器

除了以前介绍的的
:link、
:active、
:visited、
:hover，
CSS3又新增了其它的伪类选择器。

1、结构（位置）伪类

2、空伪类

:empty选中没有任何子节点的元素

3、目标伪类

:target结合锚点进行使用，处于当前锚点的元素会被选中；


找笑脸去


阿斯顿发撒旦法撒打发放大法的撒双方都

4、排除伪类

:not(selector)除
selector（任意选择器）外的元素会被选中；

1.3 伪元素选择器

• 1、::first-letter文本的第一个单词或字（如中文、日文、韩文等）
• 2、::first-line 文本第一行；
• 3、::selection 可改变选中文本的样式；
• 4、::before和::after

示例代码：伪元素实现横竖分割线

效果图：

:after、
:before在旧版本里是伪元素，
CSS3的规范里“
:”用来表示伪类，“
::”用来表示伪元素，但是在高版本浏览器下
:after、
:before会被自动识别为
::after、
::before，这样做的目的是用来做兼容处理。

2. 颜色

新增了
RGBA、
HSLA模式，其中的
A表示透明度，即可以设置颜色值的透明度，相较
opacity，它们不具有继承性，即不会影响子元素的透明度。

2.1 RGBA

Red、
Green、
Blue、
Alpha即
RGBA，
R、
G、
B取值范围
0~255。

2.2 HSLA

• H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
• S 饱和度 取值范围0%~100%
• L 亮度 取值范围0%~100%
• A 透明度 取值范围0~1

2.3 关于 CSS 的透明度

Alpha和
opacity的区别主要就是，
opacity具有继承性，父盒子设置该属性，下面所有的子元素都会继承该属性。

transparent不可调节透明度，始终完全透明。

3. 文本阴影

text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。

如：

text-shadow: 2px 2px 2px #CCC;

• 1、水平偏移量 正值向右 负值向左；
• 2、垂直偏移量 正值向下 负值向上；
• 3、模糊度是不能为负值；
• 4、阴影颜色。

示例代码：文字浮雕

效果图：

4. 盒模型

CSS3中可以通过
box-sizing来指定盒模型，即可指定为
content-box、
border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

• 1、box-sizing: border-box盒子大小为width
• 2、box-sizing: content-box盒子大小为width + padding + border

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

示例代码：





效果图：

可以看出通过设置盒子模型后，虽然.box设置了边框，但是整个box的盒子大小没有改变。

5. 边框

边框中的边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征。

5.1 边框圆角

通过
border-radius属性，设置边框圆角，圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。

为了方便表述，我们将四个角标记成1、2、3、4，如2代表右上角，CSS里提供了border-radius来设置这些角横纵轴半径值。

分别设置横纵轴半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）。

效果图：

一般情况下，我们用不到这么复杂的，除非特殊需求的时候。

支持简写模式，具体如下：

• 1、border-radius: 10px;表示四个角的横纵轴半径都为10px；
• 2、border-radius: 10px 5px;表示1和3角横纵轴半径都为10px，2和4角横纵轴半径为5px；
• 3、border-radius: 10px 5px 8px;表示1角模纵轴半径都为10px，2和4角横纵轴半径都为8px，3角的横纵轴半径都为8px；
• 4、border-radius: 10px 8px 6px 4px;表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；

椭圆的画法：

如果不想计算，直接设百分比：“50%”。

正圆的画法：

示例代码：边框圆角合集

效果图：

5.2 边框阴影

box-shadow，与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。

如：

box-shadow: 5px 5px 5px #CCC

• 1、水平偏移量 正值向右 负值向左；
• 2、垂直偏移量 正值向下 负值向上；
• 3、模糊度是不能为负值；
• 4、inset可以设置内阴影；

注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。

示例代码：

效果图：

我们通过上图可以看到，虚线是盒子的位置，粉色阴影是inset属性设置的，所以是内阴影，浅蓝色是直接设置的外阴影，效果一目了然。

6. 背景

背景在
CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

6.1 background-size

通过
background-size设置背景图片的尺寸，就像我们设置
img的尺寸一样，在移动
Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

• 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
• 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
• 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

6.2 background-origin

通过
background-origin可以设置背景图片定位(
background-position)的参照原点。

其参数设置如下：

• border-box以边框做为参考原点；
• padding-box以内边距做为参考原点；
• content-box以内容区做为参考点；

示例代码：

效果图：

6.3 background-clip

通过
background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。

其参数设置如下：

• border-box裁切边框以内为背景区域；
• padding-box裁切内边距以内为背景区域；
• content-box裁切内容区做为背景区域；

6.4 多背景

以逗号分隔可以设置多背景，可用于自适应布局。在一个盒子里可以设置多个背景图片，通过背景定位的功能将两张图片组装起来。

示例代码：

效果图：

从效果图中我们可以看到，在盒子里面设置了两张背景图，分别是上面一部分，下面一部分。这里故意给盒子高度拉长了一点，并且设置了一个灰色的背景，为的就是大家能够清楚的看到上下两部分的背景图。

7. 渐变

渐变是
CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

7.1 线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

1、必要的元素：

借助
Photoshop总结得出线性渐变的必要元素

• a、方向
• b、起始色
• c、终止色
• d、渐变距离

2、关于方向

通过具体的方位词指定

• to left
• to right
• to top
• to bottom

通过角度改变渐变的方向

• 0°，从下往上渐变
• 90°，从左向右渐变

示例代码：

效果图：

3、渐变范围

如果不设置范围，默认渐变的范围是父盒子的宽度，如果通过
background-size设置宽度的话，渐变范围即为设置的宽度。

效果图：

7.2 径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果。

1、必要的元素：

• a、辐射范围即圆半径
• b、中心点 即圆的中心
• c、渐变起始色
• d、渐变终止色
• e、渐变范围

2、关于中心点

中心位置参照的是盒子的左上角，例如：

示例代码：镜像渐变画个球

效果图：

8. 过渡

过渡是
CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

8.1 帧动画

通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。

示例代码：

效果图：

这里不做详细了解，主要是为了区分与补间动画的区别。

8.2 补间动画

自动完成从起始状态到终止状态的的过渡。

语法：transition

当前元素只要有“属性”发生变化时，可以平滑的进行过渡，并不仅仅局限于
hover状态。

• transition-property设置过渡属性

/*设置哪些属性要参加到动画效果中*/
transition-property: all;

• transition-duration设置动画过渡执行时间

transition-duration: 2s;

• transition-timing-function设置过渡速度类型

transition-timing-function:linear;
/* ease| ease-in | ease-out | ease-in-out | linear; */

• transition-delay设置过渡延时

/*1s后，过渡动画开始过渡*/
transition-delay: 1s;

连写：

/* 属性 执行时间 延时时间 过渡类型*/
transition: all 2s 1s linear;

示例代码：

效果图：

我们可以看到，触发hover事件的时候延迟1s后开始执行动画。

示例代码：过渡的实际应用

效果图：

9. 2D转换

转换（
transform）是
CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠
Flash才可以实现的效果。

9.1 位移

CSS3中，通过
translate属性对元素进行位移。

移动translate(x, y)可以改变元素的位置，x、y可为负值；

• a、移动位置相当于自身原来位置
• b、y轴正方向朝下
• c、除了可以像素值，也可以是百分比，相对于自身的宽度或高度

transform: translate(100px, 30px);

示例代码

效果图：

我们可以看到，鼠标移上去之后，蓝色盒子，分别向左和向下移动了一段距离。

9.2 缩放

缩放
scale(x, y)可以对元素进行水平和垂直方向的缩放，
x、
y的取值可为小数；

/*宽和高都放大1倍*/
transform: scale(1.5);

示例代码：

效果图：

9.3 旋转

旋转
rotate(
deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；

• a、当元素旋转以后，坐标轴也跟着发生的转变
• b、调整顺序可以解决，把旋转放到最后

/* 顺时针旋转 90度 */
transform: rotate(90deg);

示例代码：

效果图：

旋转原点：

默认情况下，旋转是按照元素的中心点旋转的，但是我们可以手动设置元素旋转的中心点。

transform-origin: 30px 40px;

示例代码：

效果图：

示例代码：扑克牌










效果图：

9.4 倾斜

倾斜
skew(deg, deg)可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为
0。

transform: skew(30deg,30deg);

示例代码：

效果图：

9.5 矩阵

矩阵
matrix()把所有的
2D转换组合到一起，需要
6个参数。
transform-origin可以调整元素转换的原点，但是对于
transform: translate(x，y)没有影响。我们可以同时使用多个转换，其格式为：
transform: translate() rotate() scale() &＃8230;等，其顺序会影转换的效果。

详细可参见

10. 3D 转换

10.1 3D 坐标轴

用
X、
Y、
Z分别表示空间的
3个维度，三条轴互相垂直。如下图：

网格状的正方形，可以想象成是我们的电脑桌面2D平面。

在 3D 转换中，前面 2D 转换的属性在这都可以使用：

• 位移

transform:translate(100px,100px,100px);

• 旋转

transform:rotate(30deg,30deg,30deg);

• 缩放

transform:scale(2,0.5,0.5);

• 倾斜

transform:skew(30deg,30deg,30deg);

在3D转换中，一定要加上一个透视属性，才能在电脑2D平面中显示出3D的效果，透视属性请看下章。

10.2 透视（perspective）

电脑显示屏是一个
2D平面，图像之所以具有立体感（
3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
perspective通过透视产生的
3D效果，只是视觉呈现而已，并不是真正的
3d立体的盒子；就是
近大远小的效果。

透视的概念其实很简单，就是“近大远小”。

举个例子：

在
2D转换的时候，我们知道一个
translate属性，他分别可以设置向左向右或者向上向下平移，但是却不能向里面或外面平移。

效果图：

没有加透视属性的时候，因为z轴是垂直电脑平面射出来的，translateZ是看不出效果的。

如何设置透视属性？

给当前元素的直接父元素添加
perspective: 800px;透视属性，注意这个值可以是随意的，但是最佳展现距离是
600px~1000px。

效果图：

如图所示，在ul加上透视属性后，第三个盒子向着z轴的负方向移动了100px。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。（没有perspective，便“没有”Z轴）并非任何情况下都需要透视效果。

10.3 3D呈现（transform-style）

什么是
3D呈现呢？不要与前面的透视搞混，透视只能使一个物体呈现近大远小的状态，不能呈现出一个立体感的东西，比如我在页面上用六个面组成一个正方形，通过透视你可能只能改变他的远近距离，并不能让他看起来像个立体的盒子，所以这里需要用到另一个属性：
transform-style。

transform-style: preserve-3d | flat

• flat：所有子元素在2D平面呈现
• preserve-3d：保留3D空间

必须设置在父元素身上并且父元素有转换（就是有变形）并且子元素也得有转换（变形）才能看得到效果。

1、示例代码：正方体

效果图：

2、示例代码：3D 导航

效果图：

10.4 3D呈现案例：3D轮播图

1、普通版 3D 轮播图

实现思路：

• 通过CSS3中transform-style: preserve-3d的概念，将视图设置成3D展示模式；
• 四张图片，分别设置其绕着X轴旋转的角度，分别对应四个立体面；
• 将旋转好的图片沿着Z轴平移盒子宽度的一半；
• 定义一个全局变量num，用来记录按钮点击的次数，当当按动按钮的时候，让ul旋转num*90°；

示例代码：

效果图：

2、切割版 3D 轮播图

实现思路：

• 结构上将之前定义好的ul重复四次；
• 设定延时，整个动画执行时间是0.8s，设定每一个ul延迟执行0.2s，即第一个延时0s，第二个延时0.2s，第三个延时0.4s，第四个延时0.6s；
• 其余步骤同上，着重强调的是，相对于上面的案例，本案例给按钮加了限制，监听第一次所有的ul旋转结束之后，按钮才能再一次被点击。

示例代码：

效果图：

10.5 backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。有两个属性：

• 1、visible背面是可见的
• 2、hidden背面是不可见的