实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器与属性选择器</title>
<style>
h2{
color: lightslategrey;
text-align: center;
}
ul{
list-style-type: none;
}
.fruit{
color: red ;
}
#fruit{
color: yellow;
background-color: goldenrod;
}
/*父子选择器*/
ul li{
background-color: #888888;
}
/*子选择器*/
ul>li{
color: slateblue;
}
/*兄弟选择器*/
#content+li{
color: lawngreen;
font-size: larger;
}
/*根据属性名来选择元素，选中所有class属性的元素*/
*[class]{
color: black;
}
/*根据属性名和值来选择元素*/
li[id="content"]{
background-color: brown;
}
/*选择class属性中包括指定单词的元素*/
li[class ~="red"]{
background-color: bisque;
}
/*选择class属性中以"wh"开头类样式的元素*/
li[class ^="wh"]{
background-color: darkmagenta;
}
/*选择class属性中以"m"开头类样式的元素*/
li[class $="m"]{
background-color: olive;
}
/*选择属性器中包括"o"的元素*/
li[id *="o"]{
padding-left: 20px;
background:url("img7.jpg");
background-repeat: no-repeat;
background-position:5px 5px;
background-size: 15px 15px;
}
</style>
</head>
<body>
<h2>购物清单：</h2>
<ul>
<li class="fruit">香蕉6斤</li>
<li class="fruit">苹果5斤</li>
<li>梨4斤</li>
<li id="fruit">西瓜3个</li>
<li class="wine">茅台5箱</li>
<li class="white wine">茅台9箱</li>
<li class="red wine">红酒7箱</li>
<li class="wine item">红酒8箱</li>
<li>1916香烟10条</li>
<li id="content">巧克力3盒</li>
<li>牛奶三箱</li>
<li>炒货10斤</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果图：
手抄：
