CSS3 浏览器选择器以及样式笔记

浏览器私有前缀

-webkit- 现行版本chrome opera safari； -moz- firefox； -ms- IE； -o- 早期版本opera； tips:对于CSS3的支持，移动端要优于PC端； www.caniuse.com

属性选择器

TagName[href="value"];TagName[href^="value"]; 属性值首位为value;TagName[href$="value"]; 属性值末尾为value;TagName[href*="m"]; 所有属性值中包含了m的都被选中；TagName[href];

伪类选择器

li:first-child();li:last-child();li:nth-child(n); 第n个子元素；li:nth-child(-n+5); 前五个；li:nth-child(3n);li:nth-last-child(-n+5); 后五个；li:nth-child(even); 偶数；li:nth-child(odd); 奇数；tips:n为正整数，元素的选取第一个的索引为1，和数组不同；li:empty； 当li标签内部为空时；li:not(.special) 选择到没有该内容的元素；h2:target{} 当点击了对应的a标签时，对应的h2将会变为其他样式； <a href="thisid"></a> <h2 id="thisid"></h2>

伪元素选择器

e::beforee::after伪元素特点： 1、依附于真实的元素； 2、必须加入content:""； 3、伪元素默认是行内元素； 4、一个真实元素只能有两个伪元素；

常用样式

border：1px solid transparent; 完全透明；

超出隐藏：

white-space:nowwrap;overflow:hidden;text-overflow:ellipsis; tips:必须是块级及行内块级元素，有具体的宽度，即可使用该样式； 仅支持单行，不支持多行；

一些其他：

opacity:具备继承属性，符合的值会影响到子盒子；hsl:一种新的颜色表示方式； h：色调，0-360； s：饱和度，0%-100%； l：亮度，0%-100%； a：alpha，透明度； eg:hsl(300,50%,50%)；

颜色表示方式汇总

英文单词： red green hotpink etc...；十六进制： #000000；rgb: rgb(255,0,255)；rsl: hsl(300,50%,50%)；

阴影(shadow)

1、

box-shadow:10px 10px 20px 5px #fff000 inset;五个参数： x轴，y轴，模糊，扩展半径，颜色，是否内嵌； tips：inset表示内嵌，加入了该属性，阴影将以内阴影的形式表现；

2、

text-shadow:10px 10px 15px green； x轴，y轴，模糊，颜色； tips:和box-shadow相比，text没有了扩展半径和inset属性；

3、多层阴影

text-shadow:10px 10px 10px rgb(255,255,255), 20px 20px 20px rgb(126,126,126);PullAhead_Knowledge:transition:all 0.2s; 表示过渡，在0.2s内执行变化；

新的盒子模型(box-sizing)

box-sizing:content-box; 经典盒子模型； border-box; 新的盒子模型；width:calc(100% - 80%); tips:calc的计算公式里的计算符号左右必须有空格；