代码：
<!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{
24.8%;
height: 200px;
background-color: #666666;
border: 1px solid #2E8B57;
float: left;
}
/* （2）#id #bb 选择所有id="bb"的元素 */
#bb{
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{
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{
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;
}
效果
