一.选择器的优先级,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>

更多相关文章

  1. 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使
  2. 0322作业
  3. css基础：简单的选择器、伪类选择器与前端组件样式模块化知识
  4. 0322作业-css基本语法、选择器及模块化开发
  5. css基础、选择器、模块化组件
  6. 【CSS入门】CSS基本语法和选择器优先级学习总结简介
  7. 伪类选择器,优先级,模块化
  8. CSS3选择器 :nth-child()的用法
  9. 选择云服务器的5个要素：性能、安全性、稳定性、价格、生态

随机推荐

  1. android 底部菜单
  2. android之【TableLayout布局】
  3. cocos2dx android mac
  4. Android 文件下载 downloadManager
  5. android 作业1相对布局（拼图）
  6. android之实现SeekBar拖动组件
  7. EditText设置不自动弹出键盘
  8. android桌面快捷方式添加 删除 更新 自动
  9. MediaScannerReceiver
  10. 2011.07.18——— android AlphaBitmap