基础选择器代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.基本选择器</title>
<style type="text/css">
/*元素选择器*/
ul {
padding: 0;
margin: 0;
width:100%;
border: 1px dashed #666;
padding: 10px 5px;
}
li{ text-align: center;
}
#item1 {
color: red;
}
.green {
color: lightgreen;
}
#item2 ~ li {
color: yellow;
}
</style>
</head>
<body><h3 align="center" padding:30px>火箭队首发阵容</h3>
<ul>
<li id="item1">克里斯保罗</li>
<li class="green">詹姆斯哈登</li>
<li class="green">阿里扎</li>
<li id="item2">莱恩安德森</li>
<li>卡培拉</li>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
属性选择器代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.属性选择器</title>
<style type="text/css">
/*元素选择器*/
ul {
padding: 0;
margin: 0;
width:100%;
border: 1px dashed #666;
padding: 10px 5px;
}
li{ text-align: center;
}
li[class ~= "red"] {
color: brown;
}
li[class="green"] {
color: lightgreen;
}
</style>
</head>
<body><h3 align="center" padding:30px>勇士队首发阵容</h3>
<ul>
<li id="item1">斯蒂芬库里</li>
<li class="green">克莱汤普森</li>
<li class="green red">凯文杜兰特</li>
<li class="red">格林</li>
<li id="item2">帕楚利亚</li>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
