前端学习历程7

CSS3

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

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

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

---

层级选择器：

<style>
    .id+li{属性：属性值}------当前元素的后面第一个同级标签赋予属性
    .id~li{属性：属性值}------当前元素的后面所有同级标签赋予属性
</style>
-------------
<ul>
   <li class="id"> </li>
   <li> </li>
</ul>

属性选择器：

E[attr]:只使用属性名，但没有确定任何属性值；
E[attr="value"]:指定属性名，并指定了该属性的属性值；
E[arrt~="value"]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且等号前面的"~"不能不写。
扩展：
E[attr^="value"]:指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]:制定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]:制定了属性名，并且有属性值，而且属性值中包含了value。
-------------------------------------------------------------------------------------------批量选择赋值
=：完全匹配
~=：包含匹配
^=：模糊匹配(开头)
$=：模糊匹配（结尾）
*=：模糊匹配（只要包含其中一个数都将被选中）

伪类选择器

结构伪类选择器：

first-child匹配子集的第一个元素。IE7就可以支持
last-child匹配父元素中最后一个X元素
nth-child（n）用于匹配索引值为n的子元素。索引值从1开始（偶数2n也可even，奇数2n+/-1或odd）
only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配
root匹配文档的根元素。在HTML中，根元素永远是HTML
empty匹配没有任何子元素（包括文本）的元素X

目标伪类选择器：

Etarget 选择匹配E的所有元素，且匹配元素被相关URL指向
div：target{ }

UI元素状态伪类选择器：

E：enabled匹配所有用户界面（form表单）中处于可用状态的E元素
E：disabled匹配所有用户界面（form表单）中处于不可用状态的E元素
E：checked匹配所有用户界面（form表单）中处于选中状态的元素E
E：selection匹配E元素中被用户选中或处于高亮状态的部分
-----------------------------------------------------------
input:enabled{ }

否定和动态伪类选择器：

E:not(s)匹配所有不匹配简单选择符s的元素E

E：link 链接委培选择器，选择匹配元素的E元素，而且匹配元素被定义了超链接并未被访问过。常用于锚点上
E：visited 伪链接选择器，选择匹配的E元素，而且匹配元素被定义了超链接已被访问过。常用于链接锚点上
E：active 用户行为选择器，选择匹配的E元素，且匹配元素被激活。常用于链接锚点和按钮上
E：hover 用户行为选择器，选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover