手写如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="作业5">
<meta name="description" content="这是我的第五次作业">
<title>作业5</title>
<style type="text/css">
ul{
border: 5px solid #989898;
width: 340px;
height: 100px;
padding: 10px 70px;
}
li{
align-content: center;
padding: 0;
list-style: none;
width: 20px;
height: 100px;
text-align: center;
background-color:skyblue;
border-radius: 5px;
float: left;
margin-right: 10px;
}
#one{
background-color: black;
}
.two{
background-color: green;
}
ul li{
color: red;
}
div>p{
color: yellow;
}
/*即使不在一个块元素依然可以选中*/
#three+li{background-color: white;}
#six~li{
background-color: #989898;
}
li[class="two"]{
color: black;
}
li[id^="s"]{
color: white;
}
li[class $="t"]{
color: brown;
}
/*ul:before{
content: "德玛西亚";
display: block;
}*/
</style>
</head>
<body>
<ul>
<li id="one">这是一列</li>
<li>这是二列</li>
<li id="three">这是三列</li>
<li>这是四列</li>
<li id="">这是五列</li>
<li id="six">这是六列</li>
<li id="seven">这是七列</li>
<li>这是八列</li>
<li>这是九列</li>
</ul>
<div>
<p>我是div内部的p元素</p>
</div>
<div>
<p>我是第二个div内部的p元素</p>
</div>
</body>
</html>