这一节课学习了很多css选择器的知识。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.21作业</title>
<style type="text/css">
/*元素选择器（标签选择器）*/
li {
list-style:none;
float:left;
padding:10px;
}
/*id选择器*/
#li-1 {
background-color:skyblue;
}
/*类选择器*/
.li-2 {
background-color:yellow;
}
/*通配选择器*/
div *{
background-color: cyan;
}
/*父子选择器*/
div ul li img {
border:1px solid red;
}
/*子类选择器*/
li > img{
width:50px;}
}
/*相邻兄弟选择器*/
.li-2 + li {
background-color:blue;
}
/*全部兄弟选择器*/
#li-3 ~ li {
border:2px solid blue;
}
</style>
</head>
<body>
<div>
<ul>
<li id="li-1"><img src="../images/11.jpg" ></li>
<li class="li-2"><img src="../images/12.jpg" ></li>
<li><img src="../images/13.jpg" ></li>
</ul>
</div>
<div>
<li id="li-3"><img src="../images/14.jpg" ></li>
<li><img src="../images/15.jpg" ></li>
<li><img src="../images/12.jpg" ></li>
<li><img src="../images/13.jpg" ></li>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
