笔记1-3_1-选择器(属性选择器)文字阴影渐变背景

1 .CSS3
浏览器前缀：
Trident内核：主要代表IE浏览器 -ms-
Gecko内核：主要代表 Firefox -moz-
Presto内核:主要代表Opera -o-
Webkit内核：主要代表Chrome和Safari -webkit-
css3 中的transform变形：
标准：transform：rotate（30deg）；
-ms-transform：rotate（30deg）；
display： -webkit-box
2 .选择器
tag、ID、CLASS、群组、包含、通配、伪类
属性选择器 : []
E[attr]
input[value]{ background: red;}
E[attr=value]
input[value=hello]{ background : red; }
E[attr^=value] ^ 表示匹配开始的位置
input[value^=hello]{ background : red; }
E[attr$=value] $ 表示匹配结束的位置
input[value$=hello]{ background : red; }
E[attr=value] 表示匹配任意的位置
input[value*=hello]{ background : red; }




有多个值的时候要用引号括起来
纯数字也要用引号
input[value=”123”]{ background : red;}
input[class=”box box2”]{ background : red; }
结构伪类选择器 :
1. nth-of-type() : 找到集合中的指定元素 , 必须是同一个类型。
first-of-type : 找到集合中的第一个元素
last-of-type : 找到集合中的最后一个元素
only-of-type : 集合只有一个元素
li:nth-of-type(2){ background:red;}
li:first-of-type{ background:red;}
li:only-of-type{ background:red;}
li:last-of-type{ background:red;}
nth-of-type() : 小括号中还可以写一个n，n表示从0开始到无穷大;2n表示偶数，2n+1表示基数
li:nth-of-type(2n){ background:red;}
li:nth-of-type(2n+1){ background:yellow;}
2. nth-child() : 找到集合中的指定元素 , 可能不是同一个类型的。
li:nth-child(2){ background:red;}
注：一定要理解：这两种之间的区别。
注：指的在同一个集合内，如果在多个集合内，需要重新的去计算。
状态伪类选择器 :
:focus 获取焦点时触发样式
input:focus{ background:red;}
a:focus{ background:red;}
button:focus{ background:red;}
div:focus{ background:red;}


按钮

ppppp

ppppp