CSS3的其他属性和选择器

1.属性选择器

1.选中有attr属性的元素e

e[attr]

2…选中有attr属性,属性值为v的元素e

e[attr='v']

3.选中有attr属性,属性值为v开头的元素e

e[attr^='v']

4.选中有attr属性,属性值为v结尾的元素e

e[attr$=‘v’]

2.结构伪类选择器

1.选中第一个子元素e

e:first-child

2.选中最后一个子元素e

e:last-child

3.选中第n个子元素e

e:nth-child(n)

4.选中倒数第n个子元素e

e:nth-last-child(n)

说明：n可以为任何值

add为奇数even为偶数还可以是带n的表达式

2n 2n-1 2n+1

5.选中唯一的子元素

e:only-child
[e不能有任何兄弟，主要用于场景判断]

注意：

child强调的是该元素在父元素的所有孩子中的排序

type系列的写法是将对应的child改为of-type

,type强调的是同类型的兄弟元素之间的排序

3.CSS伪类选择器

1.UI状态选择器

1.选中可用的元素e

e:enable

2.选中不可用的元素

e:disable

3.选 中被选中的元素

e:checked[对单选复选而言哦]

2.否定伪类选择器

选中e元素中不满足条件f的元素

e:not(f)

3.目标伪类选择器

选中成为目标的元素e

e:target

4.层级选择器

​

选中e元素的后代f

e  f 

​ 选中e元素的子代f

e>f

​ 选中e后面相邻的兄弟f

e+f

​ 选中e后面所有的兄弟f

e~f

4.css3处理兼容性问题：添加私有前缀

代表性浏览器：	内核	前缀
欧朋	presto	-o-
IE	trident	-ms-
火狐	gecko	-moz-
谷歌/safari	webkit	-webkit-
欧朋和谷歌	blink

5.软件开发的两种思想

1.优雅降级：【向下兼容】

一开始先针对高版本的浏览器完成所有功能和酷炫的效果，再对低版本浏览器进行兼容处理，以保证实现基本功能。

color:red;
-o-color:red;

2.渐进增强：【向上兼容】

先针对低版本浏览器保证实现基本功能，再针对高版本浏览器进行优化（效果、功能的添加）

​

-o-color:red;
color:red;

​

6.css3的新属性

1.文字阴影

text-shadow:x的偏移  y的偏移	模糊程度	阴影颜色；

2.盒子阴影

box-shadow:x的偏移	y的偏移	模糊程度	阴影颜色 inset；

如果加了inset就代表内阴影，不要就是外阴影。

3.圆角边框

border-radius:*px|*%

说明：如果是百分比，代表以宽度和高度的百分比为半径实现圆，如果宽高一致是正圆，不一致是椭圆。