search

博客列表 >选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现。常用伪类选择器的使用方式及伪类来模块化元素组件（表单、表格）。

选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现。常用伪类选择器的使用方式及伪类来模块化元素组件（表单、表格）。

愿情的博客
愿情的博客原创
2021年03月23日 19:04:18658浏览

一.选择器的优先级,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>
上一条：CSS选择器讲解下一条：浅谈CSS选择器以及伪类选择器模块化
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多