实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
ul {
background: skyblue;
}
.text {
color:red;
}
#shi1 {
color: yellow;
}
ul li{
color: white;
}
ul *{
color: red;
}
ul >li{
color: yellow;
}
#shi2 + li {
color:purple;
}
#shi2 ~ li {
color:lime;
}
</style>
</head>
<body>
<ul>
<li class="text">君不见，黄河之水天上来，奔流到海不复回。</li>
<li>君不见，高堂明镜悲白发，朝如青丝暮成雪</li>
<li>人生得意须尽欢，莫使金樽空对月。</li>
<li class="text">天生我材必有用，千金散尽还复来</li>
<li>烹羊宰牛且为乐，会须一饮三百杯。</li>
<li>岑夫子，丹丘生，将进酒，杯莫停。</li>
<li id="shi1">与君歌一曲，请君为我倾耳听。</li>
<li>钟鼓馔玉不足贵，但愿长醉不复醒。</li>
<li>古来圣贤皆寂寞，惟有饮者留其名。</li>
<li id="shi2">陈王昔时宴平乐，斗酒十千恣欢谑。</li>
<li>主人何为言少钱，径须沽取对君酌。</li>
<li>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
*[id] {
background-color: red;
}
li[class="text"] {
background-color: lightgreen;
}
li[class ~= "test"] {
background-color: brown;
}
li[class ^= "te"] {
background-color: coral;
}
li[class $= "t"] {
background-color: lime;
}
li[class *= "s"] {
background-color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<li>大江东去，浪淘尽，千古风流人物</li>
<li id="shi1">故垒西边，人道是，三国周郎赤壁。</li>
<li>乱石穿空，惊涛拍岸，卷起千堆雪。</li>
<li class="text test">江山如画，一时多少豪杰。</li>
<li id="shi2">遥想公瑾当年，小乔初嫁了，雄姿英发。</li>
<li class="test">羽扇纶巾，谈笑间，樯橹灰飞烟灭。</li>
<li class="text">故国神游，多情应笑我，早生华发。</li>
<li>人生如梦，一尊还酹江月</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
