CSS选择器（CSS核心属性）

CSS即层叠样式表（Cascading StyleSheet）
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的
模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 完全向后兼容，因此不必改变现有的设计。浏览器通常支持 CSS2。

CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影、渐变等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。

Css3选择器

a. 属性选择器 e[type=“text”] {} e[type*=“”] e[type^=“”] e[type$=“”]
b. 伪类选择器
（1）结构性伪类选择器 div:first-child div:last-child div:nth-child(even)
（2）目标伪类选择器 p:target{}
（3）UI 元素状态伪类选择器 :enabled :disabled :checked ::selection
（4）语言伪类选择器 :lang(mingzi){}
（5）否定伪类选择器 div :not(标签)
（6）动态伪类选择器 input:focus{}

属性选择器

在css3中，增加了如下所示的四个属性选择器，使得属性选择器有了通配符的概念。

浏览器支持:
只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你样式中使用属性选择器是比较安全的

伪元素（伪对象）选择器
1）：first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
2）：first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
3）：before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。
4）：after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。
结构性伪类选择器


目标伪类选择器
标签:target：匹配URl中锚点指定的元素，用此选择器可以给锚点指定的元素加样式

语法： Div：target{属性：属性值；}
UI元素状态伪类选择器
这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用

语言伪类选择器
语言伪类选择器允许为不同的语言定义特殊的规则，这在多语言版本的网站用起来是特别的方便。
E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。

否定伪类选择器

动态伪类选择器
a:link{ color: #ff6600 } /* 未被访问的链接 /
a:visited{ color: #87b291 } / 已被访问的链接 /
a:hover{ color: #6535b2 } / 鼠标指针移动到链接上 /
a:active{ color: #55b28e } / 正在被点击的链接 */
a:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了） input:focus用于元素成为焦点，这个经常用在表单元素上。

**提示：**在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
**提示：**在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

层级选择器

Css3优雅降级和渐进增强问题
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 的修改使其可以在低版本浏览器上正常浏览。

Css3新增的部分属性

Css3新增的关于文本的属性
文本阴影：text-shadow: h-shadow v-shadow blur color

h-shadow 必需。水平阴影的位置。允许负值;
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。


扩展：字体图标的使用
阿里文字图标的加载步骤
1.先从阿里图标库下载图标；
2.把文件放到站点中，可以建一个font文件夹
3.把iconfont.css文件导入到html文件中；
4.在html文档中写一个内联元素如span标签,加class=“iconfont 图标对应class名”

Css3新增的关于背景的属性
背景裁切：Background-clip； 用来规定背景的绘制区域（对于背景颜色）

背景原点：Background-origin；用来规定 background-position 属性相对于什么位置来定位（对于背景图片）

背景尺寸：Background-size； 用来规定背景图像的尺寸


Css3新增的关于边框的属性
Border-color 边框颜色 border:2px solid #f00;

table {border-color: red} - 所有的边框都是红色。
table {border-color: red green} - 上边框和下边框是红色，而左边框和右边框是绿色。
table {border-color: red green blue}- 上边框是红色，左边框和右边框是绿色，下是蓝色
table {border-color: red green blue yellow} - 上边框是红色，右边框是绿色，下边框是蓝色，左边框是黄色。

Border-width: 边框粗细；
Border-style: 边框线性

Border-radius:圆角边框
Border-radius:5px;
Border-radius:50%;
Border-radius:20px 20px;
Border-radius:40px 0px 30px ;
border-radius:5px 15px 20px 25px ;
border-radius:20px / 10px ; （扩展）

透明色：transparent

Box-shadow 盒子阴影


图片边框：border-image；