10-CSS3选择器详解

SS3在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

CSS3的现状

浏览器支持程度不够好，有些需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛

应对的策略：渐进增强

（1）坚持渐进增强的原则：让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好。【重要】

比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。

（2）考虑用户群体。
（3）遵照产品的方案。

参考链接：

渐进增强 VS 优雅降级 | 简书
渐进增强和优雅降级之间的不同（面试题目）

浏览器的版本问题

由于CSS3普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为：

Chrome浏览器 version 46+
Firefox浏览器 firefox 42+

如何使用手册

在查看CSS参考手册时，需要注意以下符号：

比如说，{1,4}表示可以设置一至四个参数。

下面讲CSS3的基础知识。本文讲一下 CSS3 选择器的内容。

CSS3 选择器

我们之前学过 CSS 的选择器，比如：

``` div 标签选择器

 .box 类名选择器

 #box　id选择器

 div p 后代选择器

 div.box 交集选择器

 div,p,span 并集选择器

 div>p 子代选择器

 * : 通配符

 div+p: 选中div后面相邻的第一个p

 div~p: 选中的div后面所有的p

```

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

属性选择器

属性选择器的标志性符号是 []。

匹配含义：

^：开头 $：结尾 *：包含

格式：

E[title] 选中页面的E元素，并且E存在 title 属性即可。
E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。

比如说，我们用属性选择器去匹配标签的className，是非常方便的。

这里我们用class属性来举例。代码举例：

```html <!DOCTYPE html>

CSS3-属性选择器

简介

姓名:
密码:
性别: 男女
兴趣: 写代码

E[attr]

E[attr~=attr]

E[attr|=attr]

E[attr*=val]

E[attr^=val]

E[attr$=val]

```

最后来张表格：

得小时候刚学电脑时还是使用MS-DOS作业系统，家人帮我买了一本厚重的参考书，里头收录所有DOS指令，非常详尽，而这本书也对我产生不小影响，我知道学习任何东西都必须要有正确的参考手册，才能够让学习过程更全面扎实。虽然网路上有许多教学文件，但碍于篇幅都只能够以最短捷径来帮你达到目的，对于一些较为复杂的内容来说，这些快速教学并不能让你「真正」学会，因此最好还是准备参考手册。

本文要推荐的「HTML Reference」网站很不一样，这个线上参考手册收录完整HTML语法教学，依照英文字母顺序排列，使用者可以很在这里检索某个HTML标签详细使用方法，很多可能不在我们平常会经常使用的范围（例如一些语法设定方式），但如果你想知道语法要怎么写才正确，或者想从基础开始学习HTML程式码，请记得将这网站加入书签。

我记得早先在学习制作HTML网页时也有「首页制作百宝箱」可以参考，HTML Reference大概就是比较进阶、内容较新较全面的首页百宝箱吧！不仅如此，网站还提供实际范例供使用者参考，也能一键点击快速复制语法，对学习来说绝对大有帮助。虽然HTML语法不是每个人都会碰到，但书到用时方恨少，假如你的工作与它相关，不妨找时间恶补一下。

网站名称：HTML Reference
网站链结：http://htmlreference.io/

使用教学

第一步

HTMLReference.io网站分成几个部分，最上方Collections收录一些主题，包括常用的基本元素、表单、列表、HTML5语意标签（Semantic）和表格，中间有个搜寻功能可快速查询你要找的语法，最重要的就是底下依照英文开头排序的所有HTML语法，点击可开启详细介绍。

第二步

Collection 会依照语法类别个别汇整，例如说到表单就会用到form、input、textarea、button 这些标签语法，相信大家不陌生，但你可能不知道每个语法有这么多种数值可以设定，这个网站最好的地方就在于它会把所有可以使用的设定参数列出来，并提供你实际使用范例和说明。

如果你已经开始使用HTML5，对于一些语意标签应该不陌生，HTML Reference 也将这些标签说明及范例列在 Semantic Collection。

第三步

回到HTML Reference 首页，前面有提到首页列出所有HTML 语法标签，依照字母排列，当然使用者也能透过搜寻功能来快速查找，例如下图是a 也就是超链结语法的使用教学，可以看到目标链结（href）参数是必须，网站还列出几种不同的写法和用法。

比较可惜的是网站目前只有提供英文版，可能要有一些基础的英文能力才能比较容易理解，但按照网站编排方式，就算没有看说明应该也能从范例略知一二。

第四步

HTML Reference网站提供的范例、语法都能快速一键复制，只要把滑鼠游标移动上去，点选后就能自动复制，非常方便！记得以前在学习写网页时都要去手动复制参考资料上的范例或语法教学，不但很浪费时间，还必须注意有没有弄错段落，在这里就不会遇到相同问题。

nicode 联盟（Unicode Consortium）

Unicode 联盟（Unicode Consortium）开发了 Unicode 标准（Unicode Standard）。他们的目标是使用标准的 Unicode 转换格式（即 UTF，全称 Unicode Transformation Format）取代现有的字符集。

Unicode 标准是一个成功的创举，在 HTML、XML、Java、JavaScript、E-mail、ASP、PHP 中都得到实现。Unicode 标准也得到许多操作系统和所有现代浏览器的支持。

Unicode 联盟与领先的标准开发组织合作，这些组织有 ISO、W3C 和 ECMA。

Unicode 字符集

Unicode 可以由不同的字符集实现。最常用的编码是 UTF-8 和 UTF-16：

字符集	描述
UTF-8	UTF8 中的字符可以是 1 到 4 字节长。UTF-8 可以代表 Unicode 标准中的任何字符。UTF-8 向后兼容 ASCII。UTF-8 是电子邮件和网页的首选编码。
UTF-16	16 位 Unicode 转换格式是一种可变长度的 Unicode 字符编码，能够编码整个 Unicode 指令表。UTF-16 主要用于操作系统和环境，如 Microsoft Windows、Java 和 .NET。

提示：Unicode 的前 128 个字符（与 ASCII 一一对应）使用一个与 ASCII二进制值相同的八位组进行编码，使有效的 ASCII 文本在进行 UTF-8 编码时也是有效的。

提示：所有的 HTML 4 处理器支持 UTF-8，所有的 HTML 5 和 XML 处理器支持 UTF-8 和 UTF-16！

HTML5 标准：Unicode UTF-8

因为 ISO-8859 中字符集大小是有限的，且在多语言环境中不兼容，所以 Unicode 联盟开发了 Unicode 标准。

Unicode 标准覆盖了（几乎）所有的字符、标点符号和符号。

Unicode 使文本的处理、存储和运输，独立于平台和语言。

HTML-5 中默认的字符编码是 UTF-8。

下面列出了一些 HTML5 支持的 UTF-8 字符集：

字符集	十进制	十六进制
C0 控制与基本的 Latin（C0 Controls and Basic Latin）	0-127	0000-007F
C1 控制与 Latin-1 的补充（C1 Controls and Latin-1 Supplement）	128-255	0080-00FF
Latin 扩展 A（Latin Extended-A）	256-383	0100-017F
Latin 扩展 B（Latin Extended-B）	384-591	0180-024F

如果 HTML5 网页使用不同于 UTF-8 的字符，则需要在 <meta> 标签中指定，如下：

实例

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：html5 的 Canvas介绍
下一篇：校外培训机构违法违规行为举报渠道公布

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商