1 css3选择器
1.1 属性选择器
/* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/
.attr2 a[class~="kawa"] {
//TODO
}
/* E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/
.attr3 a[class|="kawa"] {
//TODO
}
/* E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
.attr4 a[class*="kawa"] {
//TODO
}
/* E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
.attr5 a[class^="kawa"] {
//TODO
}
/* E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
.attr6 a[class$="kawa"] {
//TODO
}
1.2 伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
1.3 伪元素选择器
:first-letter /*向文本的第一个字母添加特殊样式。*/
:first-line /*向文本的首行添加特殊样式。*/
:before /*在元素之前添加内容。*/
:after /*在元素之后添加内容。*/
1.4 结构性伪类选择器
:root /*样式绑定到页面艮元素中*/
:not /*对某个结构元素使用样式,但想排除其子元素的样式*/
:empty/*当元素为空时使用的样式*/
:target/*对页面中某个target元素指定样式,该样式只在用户点击了页面的超链接起作用*/
2 CSS3布局
2.1 css3多栏布局
2.1.1 column-count 分多少栏展示
column-count: 3;
2.2 css3盒布局
display:
2.3 css3弹性盒布局
2.3.1 自适应弹性盒布局
2.4 Media Queries
根据不同浏览器窗口大小加载不同的css样式
@media screen and (min- 1000px) {
//TODO
}
@media screen and (min- 640px) and (max- 999px) {
//TODO
}
@media screen and (max- 639px) {
//TODO
}
3.1 html5shiv.min.js /可以在IE9及一下版本创建main,header,footer等HTML5元素/
3.2 respond.min.js /让IE6 IE7 IE8支持CSS3 Media Query/
3.3 seletivizr.js /提供大量IE不支持的CSS选择器和属性,包括所有的last-child选择器/
3.4 判断IE的方法
<!--[if IE 7 ]>IE6<![endif]-->
<!--[if IE 7 ]>IE7<![endif]-->
<!--[if IE 8 ]>IE8<![endif]-->
<!--[if IE 9 ]>IE9<![endif]-->