效果图：
知识点：
1，基本选择器
.class class选择器
#id id选择器
ul li 父子选择器
ul>li 子元素选择器
ul* 通配选择器
#id+li 相邻元素选择器
#id~li 全部兄弟选择器
,2，属性选择器：
*[id] 选择所以有id属性的选择器
li[class="red"] 选择属性名/值
li[class~="red"] 选择模糊的属性单词
li[class*="e"] 包含e的属性值
li[class^="php"] ph属性值开头
li[class$="s"] 属性值s结尾
3，伪类选择器：
ul:befor{content:""; display:block;clear:both; } 常用于撑开父元素
ul:after{content:url(images/)} 插图片
ul li:last-child{color:""}最后一个li
p:only-child{} 父集下仅有一个p元素（不可限定元素类型）
p:only-of-type{} 父集元素下单一的p元素
li:nth-child{} 选择第几个li元素
实例
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>选择器的使用（id/类/元素/属性选择器）</title>
<style type="text/css">
/*元素选择器*/
ul{
width: 250px;
border: 1px dashed #666;
padding: 10px 10px;
/*display: inline;*/
}
ul:after{
content:'';
display: block;
clear: both;
}
/*父子选择器*/
ul li{
background-color: lightgreen;
width: 40px;
line-height: 20px;
float: left;
margin: 10px;
border-radius: 30px;
text-align: center;
color:white;
}
/*通配选择器*/
ul *{
border:1px solid silver;
}
/*子元素选择器*/
ul>li {
background-color:
}
/*相邻兄弟选择器*/
#item2+li{
background-color: black;
}
#item2~li{
/*background-color: black;*/
}
/*id选择器*/
#item1{
background-color: skyblue;
}
#item2{
background-color: lightblue;
}
/*class选择器*/
.green{
background-color: green;
}
/*id选择器*/
* [id]{
background-color: red;
}
/*根据属性名和属性值*/
li[class="green"]{
background-color: lightblue;
}
/*根据class的属性包括单词的元素*/
li[class~="red"]{
background-color: brown;
}
/*以php开头的类样式元素*/
li[class^="ph"]{
background-color: coral;
}
/*以s结尾的样式元素*/
li[class$="s"]{
background-color: lime;
}
/*指定含有ee字母*/
li[class*="ee"]{
background-color: red;
}
</style>
</head>
<body>
<ul type="none" class="ul">
<li id="item1">1</li>
<li class="green">2</li>
<li id="item2">3</li>
<li class="green">4</li>
<li class="red blue">5</li>
<li id="item1">6</li>
<li>7</li>
<li id="item2">8</li>
<li >9</li>
<li class="php">10</li>
<li class="easy">11</li>
<li class="php css">12</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手稿：
