实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>basic selector</title>
<style type="text/css">
#title {
color: blue;
width: 300px;
height: 40px;
}
.content {
background-color: lightgreen;
}
ul li {
text-indent: 2em;
text-align: center;
line-height: 42px;
}
ul * {
/*width: 60%;*/
font-size: 90%;
border: 1px solid blue;
}
ul > li {
width: 300px;
height: 40px;
}
#item2 + li {
color: coral;
}
#item3 ~ li {
color: lightgreen;
}
li[id="item1"] {
background-color: yellow;
}
li[id~="item2"] {
color: brown;
}
li[class^="st"] {
color: purple;
}
li[class$="nd"] {
color: red;
}
li[id *="tain"] {
color: blue;
}
</style>
</head>
<body>
<h2 align="center" id="title">菜单</h2>
<ul type="none">
<li class="star">青椒肉丝</li>
<li id="item1">土豆丝</li>
<li id="contain">木须肉</li>
<li class="end">水煮牛肉</li>
<li id="item2">红烧牛肉</li>
<li id="item3">烧茄子</li>
<li>西红柿炒鸡蛋</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
