1、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.   </head>
  9.   <style>
  10.     #box {
  11.       font-size: large;
  12.     } /* 增加一级选择器，优先级高于没有的后面的覆盖前面的样式 ,将忽略书写顺序*/
  13.     #box .box1 .box2 {
  14.       color: crimson;
  15.     }
  16.     #box .box1 {
  17.       color: chartreuse;
  18.     }
  20.     .box1 {
  21.       color: blue;
  22.     }
  23.     /* 同一级的class选择器后面的覆盖前面的样式 */
  24.     .box1 {
  25.       color: blueviolet;
  26.     }
  27.   </style>
  28.   <body>
  29.     <dic id="box">
  30.       <!-- 行内样式 -->
  31.       <div style="color: aqua">选择器的优先级</div>
  32.       <!-- class选择器 -->
  33.       <div class="box1">
  34.         选择器的优先级
  35.         <div class="box2">选择器的优先级</div>
  36.       </div>
  37.     </dic>
  38.   </body>
  39. </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.   </head>
  9.   <style>
  10.     #box {
  11.       font-size: large;
  12.     } /* 增加一级选择器，优先级高于没有的后面的覆盖前面的样式 ,将忽略书写顺序*/
  13.     #box .box1 .box2 {
  14.       color: crimson;
  15.     }
  16.     #box .box1 {
  17.       color: chartreuse;
  18.     }
  20.     .box1 {
  21.       color: blue;
  22.     }
  23.     /* 同一级的class选择器后面的覆盖前面的样式 */
  24.     .box1 {
  25.       color: blueviolet;
  26.     }
  27.     table{
  28.       border-collapse: collapse;
  29.       widtH:60vw;
  30.     }
  31.     th,td{
  32.       border: 2px solid blue;
  33.     }
  34.   </style>
  35.   <body>
  36.     <dic id="box">
  37.       <!-- 行内样式 -->
  38.       <div style="color: aqua">选择器的优先级</div>
  39.       <!-- class选择器 -->
  40.       <div class="box1">
  41.         选择器的优先级
  42.         <div class="box2">选择器的优先级</div>
  43.       </div>
  44.     </dic>
  46.     <table style="border:1px solid blue ;">
  47.       <tr >
  48.         <th>选择器名</th>
  49.         <th>表达式</th>
  50.         <th>定义</th>
  51.         <th>优先级</th>
  52.       </tr>
  53.       <tr>
  54.         <td>标签名选择器</td>
  55.         <td>div { color：Red;}</td>
  56.         <td>即页面中的各个标签名的css样式</td>
  57.         <td>优先 第一级</td>
  58.       </tr>
  59.       <tr>
  60.         <td>类选择器</td>
  61.         <td>.divClass {color:Red;}</td>
  62.         <td>/即定义的每个标签的class 中的css样式</td>
  63.         <td>优先第二级</td>
  64.       </tr>
  65.       <tr>
  66.         <td>ID选择器 </td>
  67.         <td> #myDiv {color:Red;} </td>
  68.         <td>即页面中的标签的id</td>
  69.         <td>优先第三级</td>
  70.       </tr>
  71.       <tr>
  72.         <td>后代选择器（类选择器的后代选择器）</td>
  73.         <td>divClass span { color:Red;} </td>
  74.         <td>即多个选择器以逗号的格式分隔 命名找到准确的标签</td>
  75.         <td>优先第四级</td>
  76.       </tr>
  77.       <tr>
  78.         <td>群组选择器</td>
  79.         <td>div,span,img {color:Red}</td>
  80.         <td>即具有相同样式的标签分组显示</td>
  81.         <td>优先第五级</td>
  82.       </tr>
  83.       <tr>
  84.         <td colspan="4">选择器的优先级:
  85.         </br>
  86.           1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)&lt div style="color:Red;"&gt &lt /div&gt;
  87.           2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}</td>
  88.         <!-- <td></td>
  89.         <td></td>
  90.         <td>优先第五级</td> -->
  91.       </tr>
  92.     </table>
  93.   </body>
  94. </html>
  95. ```![](https://img.php.cn/upload/image/227/893/639/1616671045590969.png)
  98. |选择器名|表达式|定义|优先级|
  99. |---|---|---|---|
  100. |权重 ！important|div { color：Red; color:lime !important;}|一般调试用|级别最高级|
  101. |标签名选择器|div { color：Red;}|即页面中的各个标签名的css样式|优先 第一级|
  102. |类选择器|divClass {color:Red;}|即定义的每个标签的class 中的css样式|优先第二级|
  103. |ID选择器|#myDiv {color:Red;}|即页面中的标签的id|优先第三级|
  104. |后代选择器（类选择器的后代选择器）|divClass span { color:Red;}|即多个选择器以逗号的格式分隔 命名找到准确的标签|优先第四级|
  105. |群组选择器|div,span,img {color:Red}|即具有相同样式的标签分组显示|优先第五级|
  106. ###选择器的优先级:
  107. 1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"> </div>;
  108. 2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}</td>;

2. 实例演示前端组件样式模块化的原理与实现;

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.     <link rel="stylesheet" href="css/public.css" />
  9.   </head>
  10.   <body>
  11.     <header class="head">页眉</header>
  12.     <main class="subject">主体</main>
  13.     <footer class="foot">页脚</footer>
  14.   </body>
  15. </html>

css组件

1、public（公共）组件

  1. @import url(header.css);
  2. @import url(main.css);
  3. @import url(footer.css);
  4. * {
  5.   margin: 0;
  6.   padding: 0;
  7.   box-sizing: border-box;
  8. }
  9. a {
  10.   text-decoration: none;
  11.   color: #000;
  12. }

2、header（头部）组件

  1. head {
  2.   height: 4rem;
  4.   background-color: #eee;
  5. }

3、 main（主体）组件

  1. .subject {
  2.   height: 15rem;
  3.   background-color: antiquewhite;
  4. }

4、footer（页脚）组件

  1. .foot {
  2.   height: 5rem;
  3.   background-color: #888;
  4. }

3. 实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如列表）

  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.     <!-- <link rel="stylesheet" href="/css/public.css" /> -->
  9.     <style>
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       a {
  16.         text-decoration: none;
  17.         color: rgb(74, 240, 124);
  18.       }
  19.       a:hover {
  20.         color: #c81623;
  21.       }
  22.       ul,
  23.       li {
  24.         list-style: none;
  25.       }
  26.       /* 根据元素的位置或坐标选择 */
  27.       ul li {
  28.         background-color: beige;
  29.       }
  30.       /* 下面的LI全部选种 */
  31.       /* ul > li {
  32.         background-color: beige;
  33.       } */
  34.       /* 只选种子元素，不选种孙子元素 */
  35.       /* body > ul > li {
  36.         background-color: blue;
  37.       } */
  38.       /* 同级相邻选择器 + */
  39.       /* .last + li {
  40.         background-color: blueviolet;
  41.       } */
  42.       /* 同级相邻所有以下元素用 ~ */
  43.       /* .last ~ li {
  44.         background-color: blueviolet;
  45.       } */
  46.       /* 伪类选择器 */
  47.       /* 结构伪类选择子元素的 */
  48.       /* (0n + 3) 0为1时为单数，2为偶籹；当前面为0时3就是所要选择的指定位置*/
  49.       /* .list > :nth-of-type(0n + 3) {
  50.         background-color: crimson;
  51.       } */
  52.       /* 选择第1个方法 */
  53.       .list > :nth-of-type(1) {
  54.         background-color: crimson;
  55.       }
  56.       .list>:first-of-type: {
  57.         background-color: darkblue;
  58.       }
  60.       /* 最后一个 */
  61.       .lisr > :nth-of-type(5) {
  62.         background-color: darkcyan;
  63.       }
  64.       .lisr > :last-of-type {
  65.         background-color: darkgoldenrod;
  66.       }
  67.       /* 倒数每几个 */
  68.       .list > li:nth-last-of-type(3) {
  69.         background-color: antiquewhite;
  70.       }
  71.       /* 最后一个 */
  72.       .lisr > p:nth-of-type(4) {
  73.         background-color: darkcyan;
  74.       }
  75.       .lisr > p:last-of-type {
  76.         background-color: darkgoldenrod;
  77.       }
  78.       /* 倒数第几个 */
  79.       .list > p:nth-last-of-type(3) {
  80.         background-color: darkseagreen;
  81.       }
  82.       /* 只有一个子元素的 */
  83.       ul li:only-of-type {
  84.         background-color: rgb(231, 231, 13);
  85.       }
  86.     </style>
  87.   </head>
  88.   <body>
  89.     <ul class="list">
  90.       <li>导航1<a href="">&nbsp页眉</a></li>
  91.       <li>导航2<a href="">&nbsp左侧边栏</a></li>
  92.       <li class="last">导航3<a href="">&nbsp主体</a></li>
  93.       <li>
  94.         <!-- <ul>
  95.           <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面1</li>
  96.           <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面2</li>
  97.           <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面3</li>
  98.           <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面4</li>
  99.           <li>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp页面5</li>
  100.         </ul> -->
  101.         导航4<a href="">&nbsp右侧边栏</a>
  102.       </li>
  103.       <p>内容1</p>
  104.       <p>内容2</p>
  105.       <p>内容3</p>
  106.       <p>内容4</p>
  107.       <li>导航5<a href="">&nbsp页脚</a></li>
  108.     </ul>
  109.     <ul>
  110.       <li>只有一个的</li>
  111.     </ul>
  112.   </body>
  113. </html>

更多相关文章

  1. CSS样式表优先级及模块化原理及实现
  2. CSS：选择器优先级、前端组件样式模块化原理实现、常用伪类选择器
  3. css选择器优先级、伪类选择器的使用和模块化样式
  4. 代码中的Thread.sleep(0) 有什么意义？是写错了吗？
  5. 210322 CSS 样式与选择器
  6. 【CSS入门】学习CSS盒模型及常用样式属性详解（整理）
  7. 10 个最佳实践来改良你的 CSS
  8. CSS学习（一）
  9. CSS选择器讲解

随机推荐

  1. 小米随身WiFi，Linux下AP热点驱动（开源）
  2. 走近Linux世界：Linux与Windows特性比较
  3. linux系统时间和硬件时钟问题(date和hwcl
  4. Linux 下串口编程之三 termios结构体介绍
  5. Linux上配置使用iSCSI详细说明
  6. pc与arm板间的文件传送
  7. SUSE LINUX虚拟机设置静态IP
  8. tty、串口、console等的区别
  9. linux 文件系统的管理 (硬盘) 工作原理
  10. ASP.NET vs. PHP，哪个更快？