Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 10.20伪类结构选择器
Blogger Information
Blog 24
fans 0
comment 0
visits 10885
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
10.20伪类结构选择器
皮皮志
Original
389 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  8.     <style>
  9.         /* id=1 class=1 tag=1 故111*/
  10.         h1.name#user{
  11.             color:blue;
  12.         }
  13.         /* id=0 class=1 tag=1 故011*/
  14.         h2.name{
  15.             color:lightgreen
  16.         }
  17.         /* id=1 class=0 tag=1 故101*/
  18.         h2#user{
  19.             color:green
  20.         }
  21.         /* 比较权重大小 */
  22.         h2{
  23.             color: black;
  24.             /* 此时权重为001，无法修改第四个h2标签颜色 */
  25.         }
  26.         h2.name#user{
  27.             color:chartreuse
  28.            /* 此时权重为111，可以修改第四个h2标签颜色且其他样式无法影响当前样式*/
  29.         }
  30.         /* 选中第一个 */
  31.         .list>li:first-of-type{
  32.            background-color: blue;
  33.         }
  34.         /* 选中最后一个 */
  35.         .list>li:last-of-type{
  36.            background-color: yellow;
  37.         }
  38.         /* 选择第三个 第四个 */
  39.         .list > li:nth-of-type(3){
  40.             background-color: pink;
  41.         }
  42.         .list > li:nth-of-type(4){
  43.             background-color: pink;
  44.         }
  45.         /* 选择前三个 */
  46.         .list>li:nth-of-type(-n+3){
  47.             background-color: purple;
  48.         }
  49.         /* 选择后三个 */
  50.         .list>li:nth-of-type(n+6){
  51.             background-color: blue;
  52.         }
  53.         /* 选择偶数个 */
  54.         .list>li:nth-of-type(2n){
  55.             background-color: red;
  56.         }
  57.         /* 选择奇数个 */
  58.         .list>li:nth-of-type(2n+1){
  59.             background-color: black;
  60.         }
  61.         /* 选择全部 */
  62.         .list>li:nth-of-type(n){
  63.             background-color: green;
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <h1 class="name" id="user">你好</h1>
  69.     <h2 class="name">你好</h2>
  70.     <h2 id="user">你好</h2>
  71.     <h2 class="name" id="user">你好</h2>
  72.     <ul class="list">
  73.             <li class="item">item1</li>
  74.             <li class="item">item2</li>
  75.             <li class="item">item3</li>
  76.             <li class="item">item4</li>
  77.             <li class="item">item5</li>
  78.             <li class="item">item6</li>
  79.             <li class="item">item7</li>
  80.             <li class="item">item8</li>
  81.     </ul>
  82. </body>
  83. </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