<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<style>
.box{ width: 400px; height: 700px; background: skyblue; color: #000000; padding: 0; margin: 0;}
.box>li{ width: 120px; height: 120px; float: left; border-radius: 60px; background: #e3e3e3; list-style: none; text-align: center; line-height: 120px; margin:10px 0 0 10px}
.xlxzq + li{ background: firebrick;}
.hdxzq ~ li { background: tan;}
li:first-child{ background: yellowgreen;}
li:last-child{ background: hotpink;}
</style>
</head>
<body>
<ul class="box">
<li>第一个孩子</li>
<li>2</li>
<li>3</li>
<li class="xlxzq">相邻选择器</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="hdxzq">后代选择器</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>最后一个孩子</li>
</ul>
</body>
</html>
博客列表 >321css学习
321css学习
- 1A7498的博客原创转载
- 2018年03月22日 12:29:29815浏览
上一条：第四次作业下一条：3_21 css选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
