代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>108-114</title>
</head>
<body>
<style>
.q78+li{
background-color: yellow;
}
.q78~li{
list-style: none;
}
/* class="1"部分 */
[class]{
list-style: none;
}
li[class="123"]{
border: 1px solid red;
}
/* class="2"部分 */
#a1 li:first-child{
background-color: aqua;
}
#a1 li:last-child{
background-color: violet;
}
#a1 li:nth-child(5){
background-color: red;
}
/* :only-child :empty */
/* class="3"部分 */
.box{
display: none;
}
.box:target{
display: block;
}
/* class="4"部分 */
input:focus{
background-color: aqua;
}
p::selection{
background-color: aqua;
color: red;
}
</style>
<div class="1">
<ul>
<li class="q78">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</div>
<hr>
<div class="2">
<ul>
<li class="123">111</li>
<li class="456">222</li>
<li class="789">333</li>
<li class="147">444</li>
<li class="258">555</li>
<li class="369">666</li>
</ul>
</div>
<hr>
<div class="3">
<ul id="a1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<hr>
<div class="4">
<div>
<a href="#111">aaa</a>
<div id="111" class="box">111</div>
</div>
<div>
<a href="#222">bbb</a>
<div id="222" class="box">222</div>
</div>
<div>
<a href="#333">ccc</a>
<div id="333" class="box">333</div>
</div>
</div>
<hr>
<div class="5">
<form action="">
<input type="text"><br>
<input type="password"><br>
<input type="text"><br>
记住密码<input type="checkbox"><br>
<input type="text">
<p>sfgohajplofgjhsjgpisjgo[hjsfggslkophfgpouahfgpoahfgposhfgoposjfgaohfgsjgoasjklhfapkvjhfkbnkv;djnsolgjhlskj;bgfohs[ofgpsjhfgopvshgbog[pgh ojhapklfj[oahb[g ajb[gb[ob[aogfaoabdgggggggggggggggggggggbobgpaobgpbpbabgaobfgoabgfoabfagogbaijg[roph[ah</p>
</form>
</div>
<hr>
<div class="6">
</div>
</body>
</html>