收藏
批改狀態(tài)：未批改
老師批語：
<!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;
}
/*根據(jù)屬性名來選擇元素，選中所有class屬性的元素*/
*[class]{
color: black;
}
/*根據(jù)屬性名和值來選擇元素*/
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>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
運(yùn)行效果圖：
手抄：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號