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基本选择器（重点）
id #
class .
h1{}
优先级 id》class》标签
2层次选择器
2.1后代选择器
body p{
background:green;
}
/*body 后所有的p标签*/
2.2子选择器
body>p{
background:green;
}
/*body后的p标签（一层 儿子）*/
2.3相邻弟选择器
.c1 + p{
css样式
}
/*class为c1下的p标签 只有一个并且必须相邻*/
2.4通用选择器
.c1~p{
}
/*通用兄弟选择器，当前元素的向下的所有兄弟元素*/
3结构伪类选择器
ul li:first-child{
}
/*ul的第一个子元素*/
ul li:last-child{
}
/*ul的最后一个子元素*/
4属性选择器（重点）
<!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标签内含有name属性的*/
a[name]{
background: yellowgreen;
}
/*选中a标签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结尾的*/
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 href="http://www.163.com">a8</a>
<a href="image/1.jpg" id="last">a9</a>
</p>
</body>
</html>
