实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毫无美感的html</title>
<style>
li{
color:red;
}
ul li{
list-style: none;
}
#id1{
color: yellow;
}
.class1{
color: blue;
}
ul *{
border: 1px solid #dcdcdc;
}
li>em{
background-color: red;
}
#id1 + li{
background-color: #776655;
}
#id1 ~ li{
width: 300px;
}
[id]{
width:500px;
}
[id=id1]{
height: 50px;
}
[class ~= class2]{
height: 150px;
}
[class ^= cla]{
/*以cla开头的class属性的值*/
}
[class $= ss3]{
/*以ss3结尾的class属性的值*/
}
[class *= ss1]{
/*class属性的值中包含ss1的*/
}
</style>
</head>
<body>
<ul>
<li class="class1 class3">床前<em>明月</em>光</li>
<li id="id1">疑是地上霜</li>
<li class="class1 class2">举头望明月</li>
<li class="class2">低头思故乡</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
![KN`S7JL}$`)LK]1A7KC%}IR.png](https://img.php.cn//upload/image/632/587/655/1521967933546274.png "1521967933546274.png")
