从零开始学 Web之CSS3（一）CSS3概述，选择器

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、CSS3

1、CSS3简介

CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

2、新增特性

CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

3、优势

减少开发成本与维护成本

在CSS3出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的HTML标签，使用一个或多个图片来完成，而使用CSS3只需要一个标签，利用CSS3中的border-radius属性就能完成。

提高页面性能

很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。

4、兼容问题

浏览器对于CSS3的支持程度比较低，有的时候不同的浏览器需要添加不同的前缀。

Chrome（谷歌浏览器）：

Safari（苹果浏览器）：

Firefox（火狐浏览器）：

lE（IE浏览器）：

Opera（欧朋浏览器）：

二、选择器

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

1、属性选择器

所谓属性选择器就是根据指定名称的属性的值来查找元素。

1、：查找指定的拥有attr属性的E标签。

2、：查找拥有指定的attr属性并且属性值为value的E标签。

3、:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签

4、：查找拥有指定的attr属性并且属性值以value开头的E标签

5、：查找拥有指定的attr属性并且属性值以value开结束的E标签

2、伪类选择器

之前学过的伪类选择器：，， ，

伪类选择器：以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。

2.1、兄弟结构伪类

：获取当前元素的相邻的满足条件的元素

：获取当前元素的满足条件的兄弟元素

2.2、相对于父元素的伪类

2.2.1、查找第一个元素和最后一个元素（无过滤）

：查找E元素的父级元素中的第一个E元素。

：查找E元素的父元素中最后一个指定类型的子元素

注意：在查找的时候并不会限制查找的元素的类型，也就是如果第一个元素不是E元素的话，就查找不到，查找的时候不会过滤掉E元素之外的元素。

2.2.2、查找第一个元素和最后一个元素（有过滤）

：查找E元素的父级元素中的第一个E元素。

：查找E元素的父元素中最后一个指定类型的子元素

2.2.3、查找单个元素或多个元素（无过滤）

：查找指定索引位置的元素（从1开始的索引）

：查找索引为偶数位置的元素

：查找索引为奇数位置的元素

与上面类似，下面是倒着计算的：

2.2.4、查找单个元素或多个元素（有过滤）

2.2.5、查找开头或结尾的多个元素

无过滤： ：n 遵循线性变化，其取值0、1、2、3、4、… 但是当参数小于等于0时，选取无效。

有过滤：

无过滤倒序：

有过滤倒序：

示例：

PS：n 可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等。

2.2.6、空值：没有任何的内容，连空格都没有

2.2.7、锚链接伪类

：可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式。

3、伪元素选择器

伪元素之所以被称为伪元素，是因为它不是真正的DOM，但是却可以当成一个DOM元素看待，它的用法和真正的DOM元素的操作是一样的，但是在DOM树中又不会出现。

既然是伪元素，那么无法使用 JS 的方式来获取。

css有一系列的伪元素，如，，，等，本文就详述一下:before和:after元素的使用。

3.1、E::before，E::after

是一个行内元素，需要转换成块： 或者 或者使用 。

必须添加 content, 哪怕不设置内容，也需要，否则不会起作用。

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，因为在新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

：定义在一个元素的内容之前插入 content 属性定义的内容与样式。

：定义在一个元素的内容之后插入 content 属性定义的内容与样式。

注意：

IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素

CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类

示例：

3.2、E:first-letter

选中文本的第一个字母（英文）或者文字（中文）

3.3、E::first-line

选中文本第一行

PS：如果同时设置了::first-letter，那么 ::first-line 无法对第一个字母或文字进行设置（颜色除外）。

3.4、E::selection

设置选中文本的样式。

注意：不能改变其大小，但是可以改变颜色。

欢迎关注

Web前端之巅

念念不忘，必有回响。