基本选择器代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*标签选择器*/
ul{
background-color:green;
}
/*ID选择器*/
#cang{
color:red;
}
/*类选择器*/
.riben{
background-color: blue;
}
/*父子选择器*/
ul li{
color: white;
}
/*通配选择器*/
ul>*{
background-color:gray;
}
/*子元素选择器*/
ul>li{
color: black;
}
/*相邻兄弟选择器*/
#shui+li{
background-color: lightgreen;
}
/*选择全部兄弟*/
#shui~li{
background-color: lightgreen;
}
</style>
</head>
<body>
<ul type="none">
<li id="cang">苍老师</li>
<li class="riben">波多野结衣</li>
<li class="riben">早乙女露依</li>
<li>小川阿佐美<li>
<li>大桥未久</li>
<li>樱井莉亚</li>
<li id="shui">水菜丽</li>
<li>北野望</li>
<li>桃谷绘里香</li>
<li>上原瑞穗</li>
<li>天海翼</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
属性选择器代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*选中所有有id属性的元素*/
*[id]{
color:red;
}
/*根据属性的名和值来选*/
li[class="riben"]{
background-color: red;
}
/*选择class属性中包括all单词的元素*/
li[class~="all"]{
color:blue;
}
/*选择以"al"开头的类样式的元素*/
li[class ^="h"]{
background-color: red;
}
/*选择以"n"结尾的类样式的元素*/
li[class$="n"]{
color: blue;
}
/*选择包含e的类样式的元素*/
li[class*="e"]{
background-color: lightblue;
}
</style>
</head>
<body>
<ul type="none">
<li id="cang">苍老师</li>
<li class="riben">波多野结衣</li>
<li class="all riben">早乙女露依</li>
<li class="riben all">小川阿佐美<li>
<li>大桥未久</li>
<li>樱井莉亚</li>
<li id="shui">水菜丽</li>
<li>北野望</li>
<li class="hhaa">桃谷绘里香</li>
<li class="hhpn">上原瑞穗</li>
<li>天海翼</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业：
