css3相关笔记（一）

1.css3现状：浏览器支持程度差，需要添加私有前缀，移动端支持优于pc端，因为移动端的浏览器都是最新版本的，css3也在不断改进中，应用的相对广泛。


2.实际工作中写网页要使用渐进增强原则：低版本的浏览器可以正常访问页面，高版本的浏览器访问页面用户体验更好。


3.实际工作中要考虑用户群体，遵照产品的方案，听技术的上司（最新的技术大多意味着兼容性不是很好）的安排。


4.css3的统一环境
◆Chrome ver 46+
◆Firefox ver 42+
◆PhotoShop CS6（建议）
◆其它浏览器暂不考虑


5.css2选择器
◆div {} 标签选择器
◆.box {}类名选择器
◆#box {}id选择器
◆div p {}后代选择器
◆div.box {}交集选择器
◆div,p,span {}并集选择器
◆div>p {}子代选择器
◆* {}通配符选择器
◆div+p {}后一个兄弟选择器（紧跟div的p）
◆div~p {}后同辈选择器


6.css3属性选择器
◆div[class] {} 表示选中页面带有class属性的div
◆div[class="box"] {}表示选中页面带有class属性并且属性值等于box的div
◆div[class^="bo"] {}表示选中页面带有class属性并且属性值以bo字符串开头的div
◆div[class$="ox"] {}表示选中页面带有class属性并且属性值以ox字符串结尾的div
◆div[class*="o"] {}表示选中页面带有class属性并且属性值必须包含o字符串的div
◆金色：#daa520;


7.css2伪类（状态伪类）
◆div:hover {}鼠标移入时
◆div:link {}正常状态下（一般用于超链接）
◆div:active {}鼠标点击时
◆div:visited {}鼠标点击后 （一般用于超链接）


8.css3伪类-结构伪类选择器
◆li:first-child {}选中父元素中所有的li中的第一个li
◆li:last-child {}选中父元素中所有的li中的最后一个li
◆li:nth-child(10) {}选中父元素中所有li中的第10个li
◆li:nth-child(odd) {}选中父元素中所有li中的奇数项(非索引)的li
◆li:nth-child(even) {}选中父元素中所有li中的偶数项(非索引)的li
◆li:nth-child(n) {}选中父元素中所有li中的所有的li（n从0开始，但是当n<1的时候无效，因为没有当前项为0的元素）
◆li:nth-child(2n) {}选中父元素中所有li中当前项（非索引）为2的倍数的li
◆li:nth-child(2n+1) {}选中父元素中所有li中当前项（非索引）为2的倍数+1的li
◆li:nth-child(-n+5) {}选中父元素中所有li中前五项的li（n从0开始，但是当n<1的时候无效，因为没有当前项为0的元素），因为当n为5时结果就小于1了，所以选中的就是-0+5、-1+5、-2+5、-3+5、-4+5这些结果的当前项的li，切记不能写成5-n，因为语法上是这样规定的
◆li:nth-child(7n) {}选中父元素中所有li中当前项为7的倍数的li
◆li:nth-child(7n-1) {}选中父元素中所有li中当前项为7的倍数-1(并不6的倍数哦，如果是6的倍数则为6n而不是7n-1)的li
◆li:nth-last-child(1) {}选中父元素中所有li中的最后一个li，因为nth-last-child与nth-child正好相反，nth-last-child是从后往前选，nth-child是从前往后选。
◆li:nth-last-child(-n+5) {}选中父元素中所有li中最后五项的li，原理和上面的差不多，但是一个是从前往后，一个是从后往前，切记不能写成5-n，因为语法上是这样规定的
★使用结构伪类选择器的问题在于，它是针对父容器中子元素的实际位置(该子元素在该父容器中所有子元素中排第几，也就是第几项)，如果该父容器中的子元素的实际位置上不是你指定的元素标签，那么就找不到，结构伪类选择器是根据父元素中子元素的实际位置来找指定元素的，如果该位置上不是该标签，那么就找不到，这个问题往往很容易出错，所以计算该元素的位置时要特别准确。
9.css3伪类-新增状态伪类选择器
◆div:empty {}选中内容为空的div，连空字符都没有的div，表示内容为空的状态下的div，属于空伪类。
◆h2:target {}选中当前被激活的一个锚点（点击锚点链接后跳转到指定位置的那个id选择器的元素），表示在被激活状态下的锚点h2标签，属于目标伪类。
◆div:not(.box2) {}选中div中不是类名为box2的所有元素，属于排除伪类。


10.css3伪元素（伪元素在css2中是没有的概念，之前都是用:，在css3中有了这个概念，为了和伪类区分开来，使用::，并且必须要有content属性，由哪个元素产生的伪元素，那个伪元素就属于这个元素的一部分，并且伪元素在该元素的内部）
◆span::before {content:"前"}表示在span内部最前面添加一个伪元素，内容为字符串 前。
◆span::after {content:"后"}表示在span内部最后面添加一个伪元素，内容为字符串 后。


11.css3伪元素选择器
◆li::first-letter {}表示选中li中的第一个字母或者汉字
◆div::first-line {}表示选中div中的第一行信息(会随着div的变宽变窄而选中的信息增多或减少)
◆p::selection {}表示选中 你使用鼠标选中的信息的区域（可以改变你使用鼠标按下之后选中一片区域的样式，很神奇）


12.css3颜色
◆opacity属性只要被继承了，就无法更改，当父容器的css样式中的opacity属性值被子容器继承了就无法更改了，子容器改不了，只能改父容器。
◆完全透明的颜色：transparent
◆RGBA： red green blue（三原色） alpha （透明度）
◆HSLA（Hue Saturation Lightness Alpha）：H 色调（色调取值范围0-360 0和360代表着纯红色，120代表着纯绿色，240代表着纯蓝色）  S 饱和度（饱和度越大颜色越鲜艳，饱和度月小颜色越低沉 取值范围0%-100%）  L 亮度（亮度越大越接近白色，亮度越小越接近黑色 0%-100%） A透明度 (取值范围0-1)
◆十六进制设置法：如#ffff ，第一个f表示红色、第二个f表示绿、第三个f表示蓝色、第四个f表示透明度，但是ie浏览器的兼容性是0。


13.css3 文本阴影 text-shadow：5px 5px 5px #f00;
◆文本阴影的x轴的水平位移
◆文本阴影的y轴的水平位移
◆文本阴影的模糊半径
◆文本阴影的颜色
★一个文本可以有多个阴影,使用逗号的方式将一个文本的多个阴影隔开，也就是多个阴影效果并列书写，如text-shadow：-1px -1px 5px #f00,1px 1px 5px #0f0;


14.css3盒子的box-sizing属性
◆content-box：内容盒子  （传统盒子模型，盒子大小=定义的宽高+padding+border）
◆padding-box：内填充盒子 （其实没有这个属性，这个只是定义上的概念）
◆border-box：边框盒子  （非传统盒子模型，盒子大小=数值最大的那个值）
◆当box-sizing属性的值设置为content-box（默认值）时，就是盒子的外加模式，这个时候盒子大小=定义的宽高+padding+border
◆当box-sizing属性的值设置为border-box时，就是盒子的外减模式，这个时候盒子大小就等于真正定义的宽高的数值，这个时候定义的宽高会减小，边框和填充补上减小部分的自定义的宽高。
◆可以通过box-sizing属性的border-box和content-box制作瞬间放大或者缩小效果的动画。


15.css3之浏览器兼容性解决办法-私有化前缀
◆-webkit- ：解决谷歌与苹果浏览器内核渲染的兼容性问题
◆-moz-：解决火狐浏览器内核渲染的兼容性问题
◆-ms-：解决微软浏览器内核渲染的兼容性问题
◆-o-：解决欧朋浏览器内核渲染的兼容性问题
◆什么都不加：默认的书写方式
★如果加私有化前缀也无法解决兼容性的问题，那么就是浏览器的版本实在太低了，几乎可以放弃了。