实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第五次作业</title>
<style type="text/css">
/*元素选择器*/
ul {
padding:5;
margin:0;
width:500px;
background-color: skyblue;
}
li {
list-style:none;
}
/*id选择器 */
#top1 {
background-color:red;
}
/*类选择器*/
.green {
background-color:lightgreen;
}
/*父子选择器*/
ul li {
color:blue;
}
/*通配符选择器*/
ul * {
border:1px solid;
}
/*子元素选择器*/
ul >li{
backgrond-color:blue;
}
/*根据属性名和值修改*/
li[class="red"] {
background-color:red;
}
/*根据属性名来选择*/
*[id] {
background-color: yellow;
}
/*选择属性中包含t的类样式元素*/
li[class *="t"] {
background-color:yellowgreen;
}
</style>
</head>
<body>
<ul >
<li id="top1">子鼠</li>
<li class="green">丑牛</li>
<li class="green">寅虎</li>
<li>卯兔</li>
<li class="red">辰龙</li>
<li>巳蛇</li>
<li class="red">午马</li>
<li>未羊</li>
<li>申猴</li>
<li id= "top2">酉鸡</li>
<li id="top3">戌狗</li>
<li>亥猪</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
