CSS学习（二）-结构伪类选择器、属性选择器
一、理论：
1.结构伪类选择器：
a.E:first-child:选择第一个子元素
b.E:last-child:选择最后一个子元素
c.E:root:选择匹配元素E所在文档的根元素
d.E F:nth-child(n):选择E的第n个子元素
e.E F:nth-last-child(n)：选择元素E的倒数第n个子元素
f.E:nth-of-type(n)：选择父元素内具有指定类型的第n个E元素
g.E F:nth-last-child(n):选择第N个E元素
h.E:nth-last-of-type(n):选择父元素内的倒数第N个E元素
i.E:first-of-type:选择指定类型的第一个E元素
j.E:last-of-type:选择指定类型的最后一个E元素
i.E:only-child:选择父元素只包含一个子元素，且该子元素匹配E元素
j.E:only-of-type:告诉父元素只包含同类型的子元素，且该子元素匹配E元素
i.E:empty:选择没有子元素的元素，且该元素不包含任何文本节点
2.结构选择器中的n:
a.参数n为具体的数值
b.参数n为表达式"n*length","n+length","-n+length","n*length+b"
c.参数n为"odd"(奇数元素)，"even"(偶数元素)
2.伪元素：
a.ie6-8仅支持单冒号表示法
b.::first-letter 选择文本块第一个字母
c.::first-line 选择元素的第一行文本
d.::before/::after 可以插入额外内容的位置
e.::selection 用来匹配突出显示的文本
3.属性选择器：
a.E[attr]:选择任意类型的元素
b.E[attr=val]:以属性值为val选择元素
c.E[attr|=val]:常用于lang属性
d.E[attr-=val]:选择了包括属性及值的元素
e.E[attr*=val]:选择任意位置包含val的元素
f.E[attr^=val]:选择匹配元素以attr开头的任何字串
g.E[attr$=val]:选择以attr结尾的字串
4.CSS中常见的统配符：
a.^ 匹配起始符
b.$ 匹配终止符
c.* 匹配任意字符
二、实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padsding: 0;
}
ul{
margin:50px auto;
width:400px;
list-style: none outside none;
}
li{
display: inline-block;
margin: 5px;
padding: 5px;
width: 50px;
height: 50px;
font:bold 30px/50px arial;
background: #000;
color:#fff;
border-radius: 50px;
text-align: center;
}
ul>li:first-child{
background-color: green;;
}
ul>li:last-child{
background-color: blue;
}
ul>li:nth-child(3){
background-color: yellow;
}
ul>li:nth-child(2n){
background-color: aquamarine;
}
ul>li:nth-child(2n+1){
background-color: blanchedalmond;
}
ul>li:nth-child(n+5){
background-color: lightblue;
}
ul>li:nth-child(-n+5){
background-color: slategrey;
}
ul>li:nth-child(4n+1){
background-color: tan;
}
ul>li:nth-child(5){
background-color: darkmagenta;
}
.post>p:nth-child(2){
color:blanchedalmond;
}
.post>p:nth-of-type(2){
color:tan;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
<div class="post">
<h1>i'm h1</h1>
<p>这是我的段落1</p>
<p>这是我的段落2</p>
</div>
</body>
</html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.post{
width:300px;
margin:20px auto;
padding:5px;
border:1px solid #ccc;
}
p{
background: greenyellow;
color:#aeaeae;
border:1px solid cornsilk;
}
.post>p:only-child{
border-width: 2px;
background-color: #8f8f8f;
}
.post>p:only-of-type{
background-color: slategrey;
}
.testEmpty:empty{
height: 20px;
width: 20px;
display: block;
background-color: palegoldenrod;
}
</style>
</head>
<body>
<div class ="post">
<p>
i'm param 1
</p>
<p>
i'm param2
</p>
</div>
<div class="post">
<p>
i'm test~
</p>
</div>
<div class="testEmpty">
</div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
body{
padding: 40px 100px;
}
.demo{
width: 600px;
margin: 40px auto;
font-family: 'trebuche MS','Lucida sans',Arial;
font-size: 14px;
color:#6bb2ff;
}
table{
*border-collapse:collapse;
border-spacing: 0;
width:100%;
}
.bordered{
border: solid #ccc 1px;
border-radius: 6px;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr{
-o-transition: all 0.1s ease-in-out;
-webkit-transform: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transform: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered .highlight,
.bordered tr:hover{
background: #6bb2ff;
}
.bordered td,
.bordered th{
border-left: 1px solid #ccc;
border-top:1px solid #0055cc;
padding: 10px;
text-align: left;
}
.bordered th{
background-color: #6bb2ff;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9));
background-image: -webkit-linear-gradient(top,#ebf3fc,#dce9f9);
background-image: -moz-linear-gradient(top,green,#239285);
background-image: -ms-linear-gradient(top,#ebf3f3,#dec9f9);
background-image:-o-linear-gradient(top,#ebf3fc,#dec9f9);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ebf3fc,endColorstr=#dce9f9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#ebf3fc,endColorStr=#dce9f9)";
box-shadow: 0 1px 0 rgba(255,255,255,.8);
border-top:none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
.bordered td:first-child,
.bordered th:first-child{
border-left: none;
}
.bordered th:first-child{
border-radius: 6px 0 0 0 ;
}
.bordered th:last-child{
border-radius:0 6px 0 0 ;
}
.bordered tr:last-child td:first-child{
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child{
border-radius: 0 0 6px 0;
}
}
.zebra td,
.zebra th{
padding: 10px;
border-bottom: 1px solid #f2f2f2;
}
.zebra .alternate,
.zebra tbody tr:nth-child(even){
background: #f5f5f5;
box-shadow: 0 1px 0 rgba(255,255,255,.0) inset;
}
.zebra th{border-left: 1px solid #ccc;
border-top:1px solid #0055cc;
padding: 10px;
text-align: left;
}
.zebra th{
background-color: #6bb2ff;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9));
background-image: -webkit-linear-gradient(top,#ebf3fc,#dce9f9);
background-image: -moz-linear-gradient(top,green,#239285);
background-image: -ms-linear-gradient(top,#ebf3f3,#dec9f9);
background-image:-o-linear-gradient(top,#ebf3fc,#dec9f9);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ebf3fc,endColorstr=#dce9f9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#ebf3fc,endColorStr=#dce9f9)";
box-shadow: 0 1px 0 rgba(255,255,255,.8);
border-top:none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
.zebra td:first-child,
.zebra th:first-child{
border-left: none;
}
.zebra th:first-child{
border-radius: 6px 0 0 0 ;
}
.zebra th:last-child{
border-radius:0 6px 0 0 ;
}
.zebra tr:last-child td:first-child{
border-radius: 0 0 0 6px;
}
.zebra tr:last-child td:last-child{
border-radius: 0 0 6px 0;
}
</style>
</head>
<body>
<table class = "bordered">
<tr>
<th>#</th>
<th>Top 10</th>
<th>Year</th>
</tr>
<tr>
<td>1</td>
<td>The Stand 1</td>
<td>1901</td>
</tr>
<tr>
<td>2</td>
<td>The Stand 2</td>
<td>1902</td>
</tr>
</table>
<table class = "zebra">
<tr>
<th>#</th>
<th>Top 10</th>
<th>Year</th>
</tr>
<tr>
<td>1</td>
<td>The Stand 1</td>
<td>1901</td>
</tr>
<tr>
<td>2</td>
<td>The Stand 2</td>
<td>1902</td>
</tr>
<tr>
<td>3</td>
<td>The Stand 3</td>
<td>1903</td>
</tr>
<tr>
<td>4</td>
<td>The Stand 4</td>
<td>1904</td>
</tr>
<tr>
<td>5</td>
<td>The Stand 5</td>
<td>1905</td>
</tr>
<tr>
<td>6</td>
<td>The Stand 6</td>
<td>1906</td>
</tr>
</table>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul{
width: 690px;
margin: 20px auto;
letter-spacing: -4px;
word-spacing: -4px;
font-size: 0;
}
li{
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display: inline-block;
*display:inline;
room:1;
list-style: none outside none;
margin: 5px;
}
img {
width:128px;
height: 128px;
}
.gallery li:nth-child(2){
-webkit-filter:grayscale(1);
}
.gallery li:nth-child(3){
-webkit-filter:sepia(1);
}
.gallery li:nth-child(4){
-webkit-filter:saturate(0.5);
}
.gallery li:nth-child(5){
-webkit-filter:hue-rotate(90deg);
}
.gallery li:nth-child(6){
-webkit-filter:invert(1);
}
.gallery li:nth-child(7){
-webkit-filter:opacity(0.2);
}
.gallery li:nth-child(8){
-webkit-filter:blur(3px);
}
.gallery li:nth-child(9){
-webkit-filter:drop-shadow(5px 5px 5px #ccc);
}
.gallery li:nth-child(10){
-webkit-filter:saturate(6) hue-rotate(361deg) brightness(0.09);
}
.gallery:hover li:not(:hover){
-webkit-filter:blur(2px) grayscale(1);
opacity: .7;
}
</style>
</head>
<body>
<ul class = "gallery">
<li>
<img alt="" src="../images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="../images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="images/2-11-test.jpg" />
</li>
<li>
<img alt="" src="images/2-11-test.jpg" />
</li>
</ul>
</body>
</html>5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.demo{
width:300px;
border:1px solid #ccc;
padding: 10px;
overflow: hidden;
margin: 20px auto;
}
.demo a{
float:left;
display: block;
width: 50px;
height: 50px;
border-radius: 10px;
text-align: center;
background: #004ab3;
color:blue;
font: hold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
a[id]{
background-color: #236859;
}
a[id][title]{
background-color: slategrey;
}
a[id=last]{
background-color:#ebf3f3;
}
a[lang|=zh]{
background-color: aqua;
}
a[title~=website]{
background-color:yellowgreen;
}
a[class*=links]{
background-color: cornsilk;
}
a[href^=http]{
background-color: cyan;
}
a[href$=jpg]{
background-color: #6bb2ff;
}
</style>
</head>
<body>
<div class = "demo">
<a href = "http://www.test1.com" target="_blank" class = "links item first" id = "first" title="test1">1</a>
<a href = "http://www.test1.com" target="_blank" class = "links active item" title="test1">2</a>
<a href = "http://www.test1.com/test.jpg" target="_blank" class = "links item"title="test1">3</a>
<a href = "http://www.test1.com" target="_blank" class = "links item" title="test1">4</a>
<a href = "http://www.test1.com" target="_blank" class = "links item" title="test1">5</a>
<a href = "http://www.test1.com" target="_blank" class = "links item" title="test1" lang="zh">6</a>
<a href = "http://www.test1.com" target="_blank" class = "links item first" title="website" lang="cn">7</a>
<a href = "http://www.test1.com" target="_blank" class = "links item first" title="test1" lang="en-ch">8</a>
<a href = "http://www.test1.com" target="_blank" class = "links item" title="test1" id ="testDom">9</a>
<a href="http://www.test1.com" class="linksitem last" id ="last">10</a>
</div>
</body>
</html>