css3
1 学习前置条件：html + css2
2 概述
*历史
css3 就是层叠样式表的目前的最高版本，带来了许多新特性。如，圆角、渐变、过渡、动画、新布局(多列布局缩进盒子等)
// css 发展之初的这个设计，以至于css得以发展的如此之好。 // 遇到不认识的标签 它不会报错，并能让下面的代码继续起效。 haha { } // 无haha 标签，但是 p标签依旧有效 p { hello: 122px; font-size: 20px;//无hello元素，但是 font-size依旧有效。 }
* 兼容
http://html5test.com/ 在此内可以看看兼容的一些问题
css3更多用在移动端，移动端没有IE浏览器，PC端还要等段
时间才能完全使用
3 css3新增内容
* 选择器
关系选择器：
//1. 设置亲儿子的属性样式，孙子无用。 亲儿子 不是后代，IE7开始兼容
.wrap > p { color: red; }
//h2 标签的紧挨着的下一个 p 标签 下一个兄弟 IE7开始兼容
h2+p{
color: red;
}
//h4 标签后面的所有的兄弟 p 标签 同上
h4~p{
color: red;
}
属性选择器 //通过选择指定标签内的值来选择标签
1 img[src="img/3.png"]{ 2 border:1px solid red; 3 }
还可以 []直接选择 ， 甚至可以 [][]
[src="img/3.png"]{
}
[src="img/3.png"][alt="aa"]{
}
还有以...开头的标签选择
1 // ^ 表示以...开头的标签 2 // $ 表示以...结尾的标签 3 // * 表示含有...的标签 4 // | 表示以...开头，并紧跟一个 - 的标签，等价于 [class^="para-"] 5 // ~ 表示含有后面设置的类选择器名称的标签 6 p[class^="para"]{ 7 color: red; 8 } 9 p[class$="1"]{ 10 font-size: 24px; 11 } 12 p[class*="p"]{ 13 background-color: yellow; 14 } 15 p[class|="p"]{ 16 background-color: yellow; 17 } 18 p[class~="demo1"]{ 19 text-decoration: underline; 20 } 21 22 <body> 23 <p class="para-1 demo1">段落</p> 24 <p class="para-2 demo1">段落</p> 25 <p class="para-3 demo2">段落</p> 26 <p class="para-4">段落</p> 27 <p class="pg1">段落</p> 28 <p class="pg2">段落</p> 29 </body>
儿子序选择器 (序号从1开始不是0)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test anything</title> <style type="text/css"> /* 逐一打开注解进行测试 */ /* 1 :first-of-type 选择属于其父元素的首个 .haha 元素的每个 .haha 元素。*/ /*.haha:first-of-type{ color: green; }*/ /* 2 :last-of-type 选择属于其父元素的最后 .haha 元素的每个 .haha 元素。*/ /*.haha:last-of-type{ color: red; }*/ /* 3 :only-of-type 选择属于其父元素唯一的 .haha 元素的每个 .haha 元素。*/ /*.haha:only-of-type{ color: orange; }*/ /* 4 :only-child 选择属于其父元素的唯一子元素的每个 .haha 元素。*/ /*.haha:only-child{ color: pink; }*/ /* 5 :nth-child(n) 选择属于其父元素的第二个子元素的每个 .haha 元素。*/ /*.haha:nth-child(2){ color: blue; }*/ /* 6 :nth-last-child(n) 元素从最后一个子元素开始计数,选择属于其父元素第二个子元素每个.haha*/ /*.haha:nth-last-child(2){ color: blue; }*/ /* 7 :nth-of-type(n) 选择属于其父元素第二个 .haha 元素的每个 .haha 元素。*/ /*.haha:nth-of-type(2){ color:red; }*/ /* 8 :nth-last-of-type(n) */ /*.haha:nth-last-of-type(2){ color:red; }*/ /* 9 :first-child 选择属于父元素的第一个子元素的每个 .haha 元素。*/ /*.haha:first-child{ color:red; }*/ /* 10 :last-child 选择属于其父元素最后一个子元素每个 .haha 元素。*/ /*.haha:last-child{ color:red; }*/ </style> </head> <body> <p class="haha">p1</p> <p class="haha">p2</p> <p class="haha">p3</p> <p class="haha"> <span class="haha">p4 span1</span> <i class="haha">p4 i1</i> <span class="haha">p4 span2</span> <i class="haha">p4 i2</i> <span class="haha">p4 span3</span> <i class="haha">p4 i3</i> </p> <p class="haha">p5</p> <div class="haha"> <div class="haha"> div1 div1 </div> </div> <div class="haha"> <div class="haha"> div2 div1 </div> </div> <div class="heihei"> <div class="haha"> div3 div1 </div> <div class="haha"> div3 div2 </div> </div> <h1 class="haha">h1</h1> <h3 class="haha">h3_1</h3> <h3 class="haha">h3_2</h3> <h3 class="haha">h3_3</h3> <h3 class="haha">h3_4</h3> </body> </html>
伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* a:link a:hover a:visited a:active * :hover 能够被所有的元素使用 IE7兼容 div:hover {} * :focus得到焦点时 * :not p:not(.demo) 代表选择中class没有demo类的p元素 * :only-child 唯一的儿子 * :empty 空标签 <div></div> * :checked选中的 * :disabled和:enabled IE9兼容 */ </style> </head> <body> <p> 一： :hover 以前的伪类： a:link a:hover a:visited a:active <br/> :hover 能够被所有的元素使用 IE7兼容 <br/> 比如: div:hover {} </p> <p> 二: :focus 比如： input:focus 选择获得焦点的 input 元素。 大致使用意义在于：焦点到了input元素后，设置 input 的一些特效。 </p> <p> 三： :not 比如： p:not(.demo) 代表选择中class没有demo类的p元素(排除的效果) </p> <p> 四： :only-child 每个标签下，只有一个指定元素。 </p> <p> 五： :empty 空标签 比如：<div></div> （标签首尾相接，无任何东西。用得少） </p> <p> 六： :checked 选中的 (一般用在单选按钮和复选框) 如： input[type="radio"]:checked { } </p> <p> 七： :disabled和:enabled 不可编辑和可以编辑 IE9兼容 <input type="text" disabled><!-- 文本框就不可被编辑 --> <input type="text" enabled> <!-- 文本框就可被编辑,默认 --> </p> </body> </html>
伪元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>伪元素 </h2> <h3>::before与::after</h3> <h4>::before是在标签内容<strong>内</strong>的最开始。所以，其内容的父类是使用它的元素标签</h4> <p>如下：p标签是 内容“>>>>”的父类</p> <p> p::before { content:">>>>"; //在内容的最前面加入的内容 display: block; //对添加内容设置成块元素 color: red; //对添加内容设置颜色。 } </p> <p>p::after 同上</p> <p> 总结： 1、content表示内容，所有的::before必须有content属性，没有content，则写成content:"" 2、::before和::after是行内元素，假如要设置宽高 需要转成块元素 3、IE8不兼容::after 但是兼容:after 所以我们为了更大的兼容 :after即可 4、还可以用伪元素清除浮动！！如下： </p> <p> .cl::after{ content:""; display: block; clear: both; } </p> <h2>其他几个伪元素</h2> <p> ::selection 被选中的文字样式 IE9开始兼容 ::first-letter 表示第一个文字 IE9开始兼容 ::first-line 表示第一行 IE9开始兼容 </p> </body> </html>
