程序员web前端培训分享HTMLCSS学习笔记css3选择器CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

css3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）

渐进增强

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

渐进增强 & 优雅降级

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

CSS3选择符

· 属性选择器

00001. E[attr]：只使用属性名，但没有确定任何属性值

00002. E[attr=“value”]：指定属性名，并指定了该属性的属性值

00003. E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的

00004. E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的

00005. E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的

00006. E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value

00007. E[attr|=“value”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）

· 伪类选择器

· 结构性伪类选择器

00001. X:first-child 匹配子集的第一个元素。IE7就可以支持

00002. X:last-child匹配父元素中最后一个X元素

00003. X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始

00004. X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

00005. X:nth-last-child(n)从最后一个开始算索引。

00006. X:first-of-type匹配同级兄弟元素中的第一个X元素 ​

00007. X:last-of-type匹配同级兄弟元素中的最后一个X元素 ​

00008. X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X ​

00009. X:only-of-type匹配属于同类型中唯一兄弟元素的X ​

00010. X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X

**:root**匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

**X:empty**匹配没有任何子元素（包括包含文本）的元素X

· 目标伪类

· 目标伪类选择器 E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

· UI 元素状态伪类选择器

00001. E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素

00002. E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素

00003. E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E

00004. E::selection 匹配E元素中被用户选中或处于高亮状态的部分

· 动态伪类选择器

00001. E:link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

00002. E:visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

00003. E:active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

00004. E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

00005. E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

· 层级选择器

00001. E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

00002. E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

00003. E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第二阶段 CSS3

07 CSS复合选择器

1 交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special

记忆技巧：

交集选择器是并且的意思。即……又……的意思

比如：p.one选择的是：类名为one的段落标签。

用的相对来说比较少，不太建议使用。

2 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器i选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧:

并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

比如.one,p,#test{color；#F00;}表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

3 后代选择器

后代选择器又称为包含选择器，用来选元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

4 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

白话：这里的子指的是亲儿子不包含孙子重孙子之类。

比如：.demo>h3{color:red;}说明h3一定是demo的亲儿子。demo元素包含h3

5 课堂练习-测试选择器

在不修改以上代码的前提下，完成以下任务：

1.链接登录的颜色为红色同时主导航栏里面的所有的链接改为蓝色（简单）

2.主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等）

3.主导航栏里面的一级菜单链接文字颜色为绿色。（难）

6 属性选择器（一）

7 属性选择器（二）

8 伪元素选择器（一）

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

E::first-line文本第一行；

E::selection可改变选中文本的样式；

伪元素用双冒号来开始，跟之前学的来对比下：

.demo 类选择器，一个点

:first-child 伪类选择器，两个点

::first-letter 伪元素选择器，四个点

9 伪元素选择器（二）

E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合 content属性使用。

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

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

“："与"∷"区别在于区分伪类和伪元素

效果是：俺今年18岁

before和 after在盒子div的内部前面插入或者是内部后面插入

10 CSS书写规范

开始就形成良好的书写规范，是你专业化的开始。

空格规范

【强制】选择器与 { 之间必须包含空格。

示例：.selector { }

【强制】属性名与之后的：之间不允许包含空格

：与属性值之间必须包含空格

示例：font-size：12px；

选择器规范

【强制】当一个rule包含多个 selector时，每个选择器声明必须独占一行。

示例：

.post,

.page,

.comment {

line-height: 1.5;

}

【建议】选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。

示例：

.comment .avatar {}

【强制】属性定义必须另起一行。

示例：

.selector {

margin: 0;

padding: 0;

}​

【强制】属性定义后必须以分结尾。如上

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《08 CSS背景及应用》小伙伴们不要错过哟！