css選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>p1</p>
<p class="c1">p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
</body>
</html>
1基本選擇器（重點(diǎn)）
id #
class .
h1{}
優(yōu)先級(jí) id》class》標(biāo)簽
2層次選擇器
2.1后代選擇器
body p{
background:green;
}
/*body 后所有的p標(biāo)簽*/
2.2子選擇器
body>p{
background:green;
}
/*body后的p標(biāo)簽（一層 兒子）*/
2.3相鄰弟選擇器
.c1 + p{
css樣式
}
/*class為c1下的p標(biāo)簽 只有一個(gè)并且必須相鄰*/
2.4通用選擇器
.c1~p{
}
/*通用兄弟選擇器淘正，當(dāng)前元素的向下的所有兄弟元素*/
3結(jié)構(gòu)偽類選擇器
ul li:first-child{
}
/*ul的第一個(gè)子元素*/
ul li:last-child{
}
/*ul的最后一個(gè)子元素*/
4屬性選擇器（重點(diǎn)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 30px;
width: 30px;
border-radius: 10px;
text-decoration: none;
margin-right: 25px;
color: aquamarine;
background: #9c1b4e;
text-align: center;
font:bold 15px/30px Arial;
}
/*選中a標(biāo)簽內(nèi)含有name屬性的*/
a[name]{
background: yellowgreen;
}
/*選中a標(biāo)簽id等于first*/
a[id=first]{
background: yellowgreen;
}
/*選中class 為a介却，c的*/
a[class*="a c"]{
background: red;
}
/*選中href屬性一http開頭的*/
a[href^=http]{
background: darkmagenta;
}
/*選中href屬性以png結(jié)尾的*/
a[href$=png]{
background: darkmagenta;
}
</style>
</head>
<body>
<p class="demo">
<a href="" id="first">a1</a>
<a href="" name="a2">a2</a>
<a href="" class="a b c">a3</a>
<a href="" class="a c">a4</a>
<a href="image/3.png" class="b c">a5</a>
<a href="image/2.png" class="a c">a6</a>
<a href="http:www.baidu.com">a7</a>
<a >a8</a>
<a href="image/1.jpg" id="last">a9</a>
</p>
</body>
</html>
