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;
}
属性选择器 //通过选择指定标签内的值来选择标签
img[src="img/3.png"]{
border:1px solid red;
}
还可以 []直接选择 ， 甚至可以 [][]
[src="img/3.png"]{
}
[src="img/3.png"][alt="aa"]{
}
还有以...开头的标签选择
// ^ 表示以...开头的标签
// $ 表示以...结尾的标签
// * 表示含有...的标签
// | 表示以...开头，并紧跟一个 - 的标签，等价于 [class^="para-"]
// ~ 表示含有后面设置的类选择器名称的标签
p[class^="para"]{
color: red;
}
p[class$="1"]{
font-size: 24px;
}
p[class*="p"]{
background-color: yellow;
}
p[class|="p"]{
background-color: yellow;
}
p[class~="demo1"]{
text-decoration: underline;
} <body>
<p class="para-1 demo1">段落</p>
<p class="para-2 demo1">段落</p>
<p class="para-3 demo2">段落</p>
<p class="para-4">段落</p>
<p class="pg1">段落</p>
<p class="pg2">段落</p>
</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>