效果图

代码如下

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>CSS基本选择器与上下文选择器</title>
  9. </head>
  10. <body>
  12. <style>
  13.     ul li {
  14.         background-color: lightblue;
  15.     }
  16.     nav > ul > li {
  17.         background-color: lightgreen;
  18.     }
  19.     .start + li {
  20.         background-color: #666666;
  21.     }
  22.     .item4 ~ li {
  23.         background-color: orangered;
  24.     }
  25. </style>
  27. <div class="row">
  28.     <nav>
  29.         <ul>
  30.             <li>item1</li>
  31.             <li class="start">item2</li>
  32.             <li>item3</li>
  33.             <li class="item4">
  34.                 item4
  36.                 <ul>
  37.                     <li>item4-1</li>
  38.                     <li>item4-2</li>
  39.                     <li>item4-3</li>
  40.                 </ul>
  41.             </li>
  42.             <li>item5</li>
  43.         </ul>
  44.     </nav>
  45. </div>
  47. </body>
  48. </html>

更多相关文章

  1. 表格的制作
  2. html制作table
  3. Mozilla正在修改Firefox UI，计划5月份公布新设计
  4. js之数组对象与访问器
  5. 融云升级到到5.0报错 使用 pod ，从4.x版本升级到 5.x，写法和报错如
  6. 1209表单
  7. 1209列表元素
  8. cl_salv_table demo
  9. android 画廊效果（中间大两边小）的无限轮播banner

随机推荐

  1. [D]用python提取多段字符串该怎么写正则
  2. Python实现快速傅里叶变换（FFT）
  3. Python出现Could not find a version tha
  4. python之选课系统详解[功能未完善]
  5. Python是如何进行内存管理的
  6. Python内置函数介绍
  7. 如何从单一路径获取上层路径？
  8. 为独立的“产品”打包django项目及其依赖
  9. 基于Python的行为驱动开发实战
  10. 将字节列表转换为字节字符串