1、hmtl中的属性选择器做的两个小案例：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业题目</title>
<link rel="stylesheet" href="">
<style type="text/css">
ul {
padding: 0;
margin: 0;
width: 600px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after {
content:'';
display: block;
clear: both;
}
ul li {
/*清除默认列表样式*/
list-style: none;
/*左浮动*/
float: left;
width: 40px;
height: 40px;
/*设置文本垂直居中*/
line-height: 40px;
/*设置文本水平居中*/
text-align: center;
/*设置圆角大小*/
border-radius: 50%;
/*设置阴影*/
box-shadow: 2px 2px 2px #666666;
background: skyblue;
/*设置小球的右边距为20px*/
margin-right: 20px;
}
/*属性选择器：*/
ul li:nth-child(2n) {
/*让双色球成偶数变成红色。*/
/*强制为成红色加!important;*/
background: red!important;
}
ul li:nth-child(2n+1) {
/*让双色球成奇数变成黄色*/
background: gold;
}
</style>
</head>
<body>
<p style="background: gold; text-align: center; width: 600px; height: 32px; line-height: 32px;">双色球</p>
<ul style="text-align: center;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
<p>文章列表，每一编文章加红</p>
<style type="text/css">
ol li:first-child {
/*选择ol下面的li第一个元素背景换成红色*/
background: red;
}
ol li:last-child {
/*选择ol下面li元素中最后一个元素背景变成黄色*/
background: gold;
}
ol li:nth-child(4) {
/*选择ol下面Li元素中的第4个li元素变成蓝色*/
background: aqua;
}
</style>
<ol>
<li><a href="#">11111111111111</a></li>
<li><a href="#">2222222222222</a></li>
<li><a href="#">2222222222222</a></li>
<li><a href="#">333333333333333333333</a></li>
<li><a href="#">33333333333*</a></li>
<li><a href="#">44444444444444444*</a></li>
<li><a href="#">44555555555555555555*</a></li>
<li><a href="#">6666666666666*</a></li>
</ol>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上面例子中做了一个双色球和一个文章列表
2、下面为手抄代码作业
