选择器的优先级演示

代码段
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <style>
  10.     li {
  11.       background-color: lightgreen;
  12.     }
  13.     .tian {
  14.       background-color: lightskyblue;
  15.     }
  16.     #peng {
  17.       background-color: lightslategray;
  18.     }
  19.   </style>
  20.   <body>
  21.     <div class="list">
  22.       <ul>
  23.         <li>天蓬老师最帅1</li>
  24.         <li class="tian">天蓬老师最帅2</li>
  25.         <li class="tian" id="peng">天蓬老师最帅3</li>
  26.         <li>天蓬老师最帅4</li>
  27.         <li class="tian">天蓬老师最帅5</li>
  28.         <li>天蓬老师最帅6</li>
  29.       </ul>
  30.     </div>
  31.   </body>
  32. </html>

组件样式模块化

代码段
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <style>
  10.     /* 引入页面样式 */
  11.     @import url(index.css);
  12.   </style>
  13.   <body>
  14.     <!-- 网页头部 -->
  15.     <header>
  16.       <div class="header">头部</div>
  17.     </header>
  18.     <!-- 主题内容 -->
  19.     <main>
  20.       <div class="main">主体</div>
  21.     </main>
  22.     <!-- 底部 -->
  23.     <footer>
  24.       <div class="footer">底部</div>
  25.     </footer>
  26.   </body>
  27. </html>

伪类选择器的用法

代码段
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <style>
  10.       /* 选择第一个 */
  11.     .list ul :first-of-type {
  12.       background-color: limegreen;
  13.     }
  14.     /* 最后一个 */
  15.     .list ul :last-of-type {
  16.       background-color: #f00;
  17.     }
  18.     /* 倒数第3个 */
  19.     .list ul :nth-last-of-type(3) {
  20.       background-color: #333;
  21.     }
  22.     /* 正数第5个 */
  23.     .list ul :nth-of-type(5) {
  24.       background-color: #999;
  25.     }
  26.     /* 仅有的一个元素 */
  27.     .list ul :only-of-type {
  28.       background-color: pink;
  29.     }
  30.     /* 选择奇数行 */
  31.     .list ol :nth-of-type(2n-1) {
  32.       background-color: magenta;
  33.     }
  34.   </style>
  35.   <body>
  36.     <div class="list">
  37.       <ul>
  38.         <li>天蓬老师最帅！1</li>
  39.         <li>天蓬老师最帅！2</li>
  40.         <li>天蓬老师最帅！3</li>
  41.         <li>天蓬老师最帅！4</li>
  42.         <li>天蓬老师最帅！5</li>
  43.         <li>天蓬老师最帅！6</li>
  44.         <li>天蓬老师最帅！7</li>
  45.         <li>天蓬老师最帅！8</li>
  46.         <li>天蓬老师最帅！9</li>
  47.         <p>天蓬老师最帅！</p>
  48.       </ul>
  49.       <ol>
  50.         <li>你说得对！1</li>
  51.         <li>你说得对！2</li>
  52.         <li>你说得对！3</li>
  53.         <li>你说得对！4</li>
  54.         <li>你说得对！5</li>
  55.       </ol>
  56.     </div>
  57.   </body>
  58. </html>

更多相关文章

  1. C语言常见的代码题
  2. Jenkins+Maven+Svn实现代码自动打包与发布
  3. Python代码运行速度慢?这五种方法很管用
  4. 你见过哪些令你瞠目结舌的 JavaScript 代码技巧？
  5. 程序员因一张嵌套7层的循环代码截图被开除！
  6. Mysql错误代码
  7. VSCODE，一款免费好用的源代码编辑器
  8. php第一课vscode安装
  9. Python是什么?为什么Python受欢迎?

随机推荐

  1. android 塔防游戏汇总 及android 游戏开
  2. 【Android】【Framework】Android_Framew
  3. android图片切换ImageSwichter的动画切换
  4. Android Shape 详解
  5. android热修复--阿里热修复使用和源码分
  6. android 背景图片
  7. android http 请求方式
  8. Android 的运行机制
  9. Android ADT, SDK, SDK_tool等官方下载说
  10. 【转】android 图片自动切换