代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业</title>
<link rel="stylesheet" type="text/css" href="css/10.23zy.css"/>
</head>
<body>
<!-- （1）.class .aa 选择所有class="aa"的元素 -->
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<!-- （2）#id #bb 选择所有id="bb"的元素 -->
<div id="ss">
<div id="bb">飞机</div>
<div id="bb">火箭</div>
<div id="bb">大炮</div>
<div id="bb">导弹</div>
</div>
<!-- 3）标签：根据标签名选中元素 -->
<span>123e1736et</span>
<span>123e1736et</span>
<span>123e1736et</span>
<!-- （4）复合 -->
<p>1qqufhcabhus</p>
<p>1qqufhcabhus</p>
<div id="z4">eee</div>
<div class="b4">dddd</div>
<!-- （5）属性选择器 -->
<input type="text" id="hh" value="123" />
<input type="password" id="hh" value="123" />
<!-- （6）:checked input:checked 选择所有选中的表单元素 -->
<input type="checkbox" name="" id="" value="临淄" />临淄
<input type="checkbox" name="" id="" value="" />高清
<input type="checkbox" checked="checked" name="" id="" value="" />沂源
<select name="sel">
<option value="张店">张店</option>
<option value="临淄">临淄</option>
<option value="高清">高清</option>
<option value="沂源" selected="selected">沂源</option>
</select>
<input type="submit" name="" id=""/>
<!-- （7）:disabled input:disabled 选择所有禁用的表单元素 -->
<input type="text" name="sss" id="" value="" />
<input type="text" name="sss" id="" value="" disabled="disabled" />
<!-- （8）:empty p:empty 选择所有没有子元素的p元素 -->
<p>123</p>
<p><br>123<br></p>
<p></p>
<!-- （9）:last-child p:last-child 选择所有p元素的最后一个子元素
选择所有p元素的第二个子元素 选择所有p元素倒数的第二个子元素-->
<div id="">
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</div>
<!-- （12）:read-only input:read-only 选择只读属性的元素属性 -->
<p>普通的input元素:<br><input value="hello"></p>
<p>普通的input元素:<br><input value="hello"></p>
<p>只读的input元素:<br><input readonly value="hello"></p>
</body>
</html>
/* （1）.class .aa 选择所有class="aa"的元素 */
.aa{
width: 24.8%;
height: 200px;
background-color: #666666;
border: 1px solid #2E8B57;
float: left;
}
/* （2）#id #bb 选择所有id="bb"的元素 */
#bb{
width: 40px;
height: 1.875rem;
color: blue;
float: right;
}
/* 3）标签：根据标签名选中元素 */
span{
height: 2em;
font-weight: 100;
background-color: sandybrown;
}
/* （4）复合 */
#z4,.b4{
color: #0000ff;
}
/* （5）属性选择器 */
input[type="text" ]{
background-color: #0000FF;
}
/* （6）:checked input:checked 选择所有选中的表单元素 */
input:checked{
width: 20px;
}
/* （7）:disabled input:disabled 选择所有禁用的表单元素 */
input:disabled{
background-color: #2E8B57;
}
/* （8）:empty p:empty 选择所有没有子元素的p元素 */
p:empty{
height: 20px;
background-color: red;
}
/* （9）:last-child p:last-child 选择所有p元素的最后一个子元素 */
p:last-child{
width: 20px;
color: red;
}
/* （10）:nth-child(n) p:nth-child(2) 选择所有p元素的第二个子元素 */
p:nth-child(2){
color: #0000FF;
}
/* （11）:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素 */
p:nth-last-child(2){
color: skyblue;
background-color: #444444 !important;
}
/* （12）:read-only input:read-only 选择只读属性的元素属性 */
input:read-only
{
background-color: yellow;
}
效果