Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现。常用伪类选择器的使用方式及伪类来模块化元素组件（表单、表格）。
Blogger Information
Blog 20
fans 0
comment 0
visits 11682
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
选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现。常用伪类选择器的使用方式及伪类来模块化元素组件（表单、表格）。
愿情的博客
Original
652 people have browsed it

一.选择器的优先级,id,class,tag

  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>层叠与优先级</title>
  8.     <style>
  9.       /* 1,1,3 */
  10.       html body h1#first.active {
  11.         color: palevioletred;
  12.       }
  14.       /* id选择器优先级大于class */
  15.       /* 1,0,3 */
  16.       html body h1#first {
  17.         color: lightblue;
  18.       }
  20.       /* 1,0,2 */
  21.       body h1#first {
  22.         color: beige;
  23.       }
  25.       /* 选择器本身优先级大于书写顺序 */
  26.       /* 样式类 */
  27.       /* 0,1,2 */
  28.       body h1.active {
  29.         color: blue;
  30.       }
  31.       /* 0,1,1 */
  32.       h1.active {
  33.         color: yellow;
  34.       }
  36.       /* 标签选 */
  37.       /* 0,0,3 */
  38.       html body h1 {
  39.         color: green;
  40.       }
  42.       /* 优先级相同时，书写顺序决定优先级 */
  43.       /* 0,0,3 */
  44.       html body h1 {
  45.         color: red;
  46.       }
  48.       /* 样式类
  49.       .active {
  50.         color: blue;
  51.       }*/
  53.       /* #first {
  54.         color: lightblue;
  55.       }*/
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <h1 class="active" id="first">Hello Woreld</h1>
  60.   </body>
  61. </html>
  63. <!-- 公式：id >class >tag -->

二.前端组件样式模块化的原理与实现

mokuai

  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>模块化样式表</title>
  9.     <link rel="stylesheet" href="css/index.css" />
  11.     <!-- header { 1em=16px,3em=48px min-height: 3em; background-color: #ddd; }
  13.       main { 1em=16px,3em=48px min-height: 20em; background-color: lightcyan; }
  15.       footer { 1em=16px,3em=48px min-height: 3em; background-color: #999; }
  16.     @import url(css/header.css); @import url(css/mian.css); @import
  17.     url(css/footer.css); 
  18.     <style>
  19.       @import url(css/index.css);
  20.     </style> -->
  21.   </head>
  22.   <body>
  23.     <header>页眉</header>
  24.     <main>主体</main>
  25.     <footer>页脚</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>伪类选择器</title>
  8.     <style>
  9.       /* 结构伪类：选择子元素，只要有一个父元素作为查询起点 */
  10.       /* .list > :nth-child(3) {
  11.         background-color: violet;
  12.       } */
  13.       /* 匹配任何位置元素
  14.       n = （0，1，2，3，4.....) */
  15.       /* .list > li:nth-child(0n + 3) {
  16.         background-color: violet;
  17.       } */
  19.       /* 分组伪类结构选择器,推荐使用 */
  20.       .list > li:nth-of-type(3) {
  21.         background-color: cyan;
  22.       }
  24.       /* 选择中第一个p /li  */
  25.       .list > p:nth-of-type(1) {
  26.         background-color: lightgreen;
  27.       }
  28.       .list > li:nth-of-type(1) {
  29.         background-color: lightgreen;
  30.       }
  32.       .list > li:nth-of-type(7) {
  33.         background-color: green;
  34.       }
  35.       /* 最后一个p */
  36.       .list > p:nth-of-type(3) {
  37.         background-color: red;
  38.       }
  39.       .list p:last-of-type {
  40.         background-color: blue;
  41.       }
  42.       .list p:first-of-type {
  43.         background-color: red;
  44.       }
  46.       /* 选择倒数第三个 */
  47.       .list > li:nth-last-of-type(3) {
  48.         background-color: yellow;
  49.       }
  50.       ul > li:only-of-type {
  51.         background-color: turquoise;
  52.       }
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <ul class="list">
  57.       <li>item1</li>
  58.       <li>item2</li>
  59.       <li>item3</li>
  60.       <li>item4</li>
  61.       <li>item5</li>
  62.       <li>item6</li>
  63.       <p>item7</p>
  64.       <p>item8</p>
  65.       <li>item9</li>
  66.       <p>item10</p>
  67.     </ul>
  68.     <ul>
  69.       <li>item</li>
  70.     </ul>
  71.   </body>
  72.   <!-- 选择任何一个：nth-of-type(n) 选择第一个：first-of-type
  73.   选择最后一个：last-of-type 选择倒数某一个：nth-last-of-type(n)
  74.   选择唯一子元素得元素：only-of-type-->
  75. </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>组件化编程思想t</title>
  8.     <style>
  9.       /* 只有获取到页面中得某个元素组件得入口，
  10.       再根据子元素得位置，使用伪类就可以选择任何一个元素了 */
  11.       /* 选择首页 */
  12.       /* .index {
  13.         background-color: yellow;
  14.       } */
  15.       /* menu是入口 */
  16.       /* .menu :first-of-type {
  17.         background-color: tomato;
  18.       }
  19.       .menu :last-of-type {
  20.         background-color: turquoise;
  21.       }
  22.       .menu :nth-last-of-type(2) {
  23.         background-color: yellow;
  24.       }
  26.       .menu :nth-last-of-type(3) {
  27.         background-color: turquoise;
  28.       } */
  29.       @import url(css/menu.css);
  30.       @import url(css/login.css);
  31.       /* 只要获取表单得入口，使用伪类可以获取表单中任何一个控件 */
  32.       /* 获取到提交按钮 */
  33.       /* .login button {
  34.         background-color: turquoise;
  35.         color: black;
  36.       } */
  37.       /* .login :only-of-type {
  38.         background-color: green;
  39.         color: black;
  40.       }
  41.       .login :first-of-type {
  42.         background-color: burlywood;
  43.         color: black;
  44.       }
  45.       .login :nth-last-of-type(2) {
  46.         background-color: blanchedalmond;
  47.         color: black;
  48.       }
  49.       .login :nth-of-type(3) {
  50.         background-color: red;
  51.         color: black;
  52.       } */
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <nav class="menu">
  57.       <a href="">首页</a>
  58.       <a href="">视频</a>
  59.       <a href="">下载</a>
  60.       <a href="">注册/登录</a>
  61.     </nav>
  62.     <hr />
  63.     <form action="" style="display: grid; gap: 1rem" class="login">
  64.       <input type="text" placeholder="username" />
  65.       <input type="password" placeholder="password" />
  66.       <input type="email" placeholder="demo@email" />
  67.       <button>提交</button>
  68.     </form>
  69.   </body>
  70. </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