Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1020作业
Blogger Information
Blog 19
fans 0
comment 1
visits 7434
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
1020作业
移动用户-4050479
Original
353 people have browsed it

权重

  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>Document</title>
  9.     <!-- !权重实体标记 class id  tag-->
  10. <!-- !权重顺序 class id  tag=>(标签) -->
  11. <!-- !计数方式 选择器的数量-->
  12. <!-- !权重优先级  id > class > tag -->
  13. <!-- !尽量不用  id  id 权重过高  -->
  15. <style>
  16.     h1 { /* （ 0 ，0 , 1） 
  17.              ( id , class , tag )*/
  18.         /* ! 权重表示方法 */
  19.         color: brown;
  20.     }
  21.     h2 .table { /* （0 , 1 , 1 ） */
  22.         color: aqua;
  23.     }
  24.     h1 #ac .title { /* ( 1 ， 1 ， 1) */
  25.         color: #000;
  26.     }
  27.     h1 #mvc p #ac .title { /* ( 2 ， 1 ， 2) */
  28.         color: #000; 
  29.     }
  31.     /* 提权 */
  32.     li.cv {
  33.         background-color: rgb(200, 118, 18);
  34.     }
  35.     li {
  36.         background-color: rgb(30, 169, 122);
  37.     }
  39.     /* 提权 */
  40.     div p {
  41.         color: blueviolet;
  42.     }
  43.     p {
  44.         color: chartreuse;
  45.     }
  46.     /* !  */
  47. </style>
  48. </head>
  49. <body>
  50.     <div>
  51.         <p>cvvvvvvvv</p>
  52.     </div>
  53.     <ul class="css">
  54.         <li class="cv">abc2</li>
  55.         <li class="cv">abc3</li>
  56.         <li class="cv">abc4</li>
  57.         <li class="cv">abc5</li>
  58.         <li class="cv">abc6</li>
  59.         <li class="cv">abc7</li>
  60.         <li class="cv">abc8</li>
  61.         <li class="cv">abc9</li>
  62.         <li class="cv">abc10</li>
  63.     </ul>
  65. </body>
  66. </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>Document</title>
  9.     <style>
  10.         /* 结构伪类 匹配子元素 要设置查询起点 */
  12.         /* 选择全部 */
  13.         .css > li:nth-of-type(n) {
  14.             background-color:gainsboro ;
  15.         }
  17.         /* 选择第一个 */
  18.         .css > li:first-of-type {
  19.             background-color: rgb(255, 123, 0);
  20.         }
  21.         /*  */
  22.         .css > li:last-of-type {
  23.             background-color: rgb(255, 132, 0);
  24.         }
  25.         /* 状态伪类 */
  26.         /* :nth-of-type( an + b ) 参数是 an + b */
  27.         /* 
  28.         * a : 系数 取值范围是 1-3
  29.         * n ：参数 取值范围 1-3
  30.         * b ：偏移量 从 0 开始
  31.         规则 ：从一开始
  32.         */
  34.         /* 选择一个数据 需要 a = 0  */
  35.         .css > li:nth-of-type( 0n + 3 ){
  36.             background-color: aqua;
  37.         }
  39.         .css > li:nth-of-type( 0n + 3 ){
  40.             background-color: aqua;
  41.         }
  43.         /* 选择一组数据  */
  44.         /* 
  45.             全选
  46.         .css > li:nth-of-type(n){
  47.             background-color: blueviolet;
  48.         } */
  49.     </style>
  50. </head>
  51. <body>
  52.     <!-- 结构伪类 -->
  53.     <ul class="css">
  54.         <li class="vb">1</li>
  55.         <li class="vb">2</li>
  56.         <li class="vb">3</li>
  57.         <li class="vb">4</li>
  58.         <li class="vb">5</li>
  59.         <li class="mv">6</li>
  60.         <li class="mv">7</li>
  61.         <li class="mv">8</li>
  62.         <li class="mv">9</li>
  63.         <li class="bn">10</li>
  64.         <li class="bn">11</li>
  65.         <li class="bn">12</li>
  66.         <li class="bn">13</li>
  67.         <li class="bn">14</li>
  68.     </ul>
  69. </body>
  70. </html>

Correcting teacher：PHPzPHPz

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