Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第三课 选择器、模块化组件、伪类选择器
Blogger Information
Blog 6
fans 0
comment 0
visits 3246
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
第三课 选择器、模块化组件、伪类选择器
phpcn_u40613
Original
495 people have browsed it

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>
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