Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 样式选择器、组件模块化及伪类选择器的用法演练
Blogger Information
Blog 5
fans 0
comment 0
visits 3087
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
样式选择器、组件模块化及伪类选择器的用法演练
加油2021
Original
422 people have browsed it

选择器的优先级演示

代码段
  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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来你需要配付好眼镜了,居然认为我帅?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post