CSS3
CSS3
一， css3可以做什么
1， 边框圆角
2， 盒阴影
3， 旋转
4， 渐变
5， ……
二， CSS3的属性选择器
在CSS中追加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]
1，[att*=val]属性选择器
如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。
2，[att^=val]属性选择器
如果用att表示的属性的属性开头字符为用val指定的字符的话，那么该元素使用这个值。
3，[att$=val] 属性选择器
如果元素用att表示的属性的属性值的结尾字符为用val指定的字符,那么该元素使用这个样式。
<html>
<head>
<meta charset="UTF-8">
<title>CSS3中的属性选择器</title>
<style>
/*[id*= section1]{*/
/*background: green;*/
/*}*/
/*[id*= section2]{*/
/*background: #ff6600;*/
/*}*/
/*[id*=section1-1]{*/
/*background: goldenrod;*/
/*}*/
/*[id*=section]{*/
/*background: #000;*/
/*}*/
/*[id^=s]{*/
/*background: cornflowerblue;*/
/*}*/
/*[id^=b]{*/
/*background: hotpink;*/
/*}*/
[id$=c]{
background: green;
}
[id$=\-1]{
background: saddlebrown;
}
[id$=\_2]{
background: red;
}
</style>
</head>
<body>
<h1>CSS3中的属性选择器</h1>
<div id="section1a">sectiona</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_3">section2-2</div>
</body>
</html>三， 结构性伪类选择器
1， 类选择器
在css中可以用类选择器把相同的元素定义成不同的样式。比如：
p.left{text-align:left}
p.right{text-align:right}
2, 伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意其名。
最常见的伪类选择器
a:link{color:#ff6600} /*未被访问的链接*/
a:visited{color:#87b291}/*已被访问的链接*/
a:hover{volor:#6535b2}/*鼠标指针移动到链接上*/
3, 伪元素选择器
伪元素选择器，针对于CSS中已经定义好的伪元素使用的选择器。
使用方法：
选择器：伪元素{属性：值}
与类配合使用
选择器.类名：伪元素{属性：值}
4, 在CSS中，主要有四个伪元素选择器
1） first-line伪元素选择器
第一行文字
2） first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉子）使用样式
3） before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容
4） after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容
5， 结构性伪类选择器root、not、empty和target
1） root 选择器
root选择器将样式绑定到页面的根元素中。
2） not选择器
相对某个结构元素使用样式，但是想拍出这个结构元素下面的子结构元素，让它不使用这个样式时，我们就可以使用not选择器。
3） empty选择器
empty选择器指定当元素中内容为空白时使用的样式。
4） target选择器
target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面找那个的超链接，并跳转到target元素后起作用。
6， 选择器first-child、last-child、nth-child和nth-last-child
1） first-child选择器
first-child单独指定第一个子元素的样式。
2） last-child选择器
last-child单独指定最后一个子元素的样式
3） nth-child选择器
nth-child(n)选择器匹配正数下来第N个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素
4） nth-last-child选择器
nth-last-child(n)选择器匹配倒数数下来第N个子元素
nth-child(odd)选择器匹配倒数下来第奇数个子元素
nth-child(even)选择器匹配倒数下来第偶数个子元素
7, 选择器nth-of-type和nth-last-of-type
1） 在使用nth-child和nth-last-child时产生的问题
在案例中指定奇数文章的标题背景为黄色，偶数文章的标题为绿色。
2) 使用nth-of-type和nth-last-of-type
Nth-of-type和nth-last-of-type在css3中就是用来避免上面这类问题的发生，在统计的时候就只针对同类型的子元素进行计算。
nth-of-type正数
nth-last-of-type倒数
兼容性：
Nth-of-type和nth-last-of-type都是CSS3开始提供需要在IE8以上的浏览才会被支持，chrome浏览器、Firefox浏览器、opera浏览器、Safari浏览器都支持！
8， 循环使用样式
nth-child（An+B）A表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置。
9， Only-child选择器
Only-child选择器，只对唯一的子元素起作用