css3的新增选择器和属性

一、优雅降级和渐进增强

1、优雅降级：从完美功能，向下做兼容

2、渐进增强：从基本功能逐渐优化到高版本支持的优化界面

二、新增的属性选择器

       1、属性选择器（标志是[]）

查找到拥有此类属性的标签

/*查找到带有alt属性的标签*/
[alt]{
background:red;
}

/*在div这标签中查找到带有class属性的标签*/
div[class]{
background:red
}

查找到属性值为cat的属性的标签
div[class=cat]{
background:red
}

查找到属性值中带有cat的属性的标签
div[class~=cat]{
background:red
}

查找到属性值中带有字母cat的属性的标签
div[class*=cat]{
background:red
}

查找到属性值中以c开头的属性的标签
div[class^=c]{
background:red
}

查找到属性值中以c结尾的属性的标签
div[class$=c]{
background:red
}

 2、结构伪类选择器

（1）常见的几种选择器：

li:first-child {background:red}li元素里的第1个子元素

li:last-child {background:red}li元素里的最后个子元素

li:nth-child(3) {background:red}li元素里的第3个子元素

li:nth-child(2n+1（odd）) {background:red}li元素里的第奇数个子元素（实现隔行变色比较方便）

li:nth-child(2n(even)) {background:red}li元素里的第偶数个子元素（实现隔行变色比较方便）

li:nth-last-child(2） {background:red}li元素里倒数第2个子元素

（2）特殊的选择器：

根标签：即html标签本身
：root{ 
background:pink;
}

空标签：用来寻找空标签，即标签里没有内容
：empty{background:pink;
}

3、目标伪类

：targe{
background
：pink
}

需要结合猫店进行使用

4、否定伪类

： not（要否定的对象）{
background
：pink
}

5、动态伪类

:link
:hover
:focus
:active
:visited

6、UI状态伪类

:enable
:disable
:checked
::selecte

7、层级选择器

找后代：空格
找儿子：>
找兄弟：+紧跟后面的哪一个兄弟
       ~后面的所有兄弟