简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >CSS选择器权重的原理与计算方式与结构伪类

CSS选择器权重的原理与计算方式与结构伪类

牙森江
牙森江原创
2022年10月21日 17:38:59378浏览

1.CSS选择器

1.1CSS选择器的四种写法

1.1.1 父子关系

  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>CSS选择器</title>
  8.     <style>
  9.               /* 父子关系 */
  10.               .item> .in
  11.               {
  12.                 color: rgb(231, 22, 224);
  13.                 border: 1px rgb(0, 0, 0) solid;
  14.               }
  15.     </style>
  16. </head>
  17. <body>
  18.     <!-- 父子关系:div与p标签 -->
  19.     <div class="item">
  20.         <p class="in">我不喜欢CSS1</p>
  21.         <p class="in">我不喜欢CSS2</p>
  22.         <p class="in">我不喜欢CSS3</p>
  23.         <ul class="list">
  24.             <li class="listitem">我不想学PHP</li>
  25.             <li class="listitem">我不想学PHP</li>
  26.             <li class="listitem">我不想学PHP</li>
  27.             <li class="listitem">我不想学PHP</li>
  28.             <li class="listitem">我不想学PHP</li>
  29.         </ul>
  30.         <p class="in">我不喜欢CSS4</p>
  31.         <p class="in">我不喜欢CSS5</p>
  32.         <p class="in">我不喜欢CSS6</p>
  33.     </div>
  34. </body>
  35. </html>

代码运行效果如下：

" class="reference-link">

1.1.2 后代关系

  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>CSS选择器</title>
  8.     <style>
  10.               /* 后代关系 */
  11.               .item .in
  12.               {
  13.                 background-color: red;
  14.               }
  15.     </style>
  16. </head>
  17. <body>
  18.     <!-- 父子关系:div与p标签 -->
  19.     <div class="item">
  20.         <p class="in">我不喜欢CSS1</p>
  21.         <p class="in">我不喜欢CSS2</p>
  22.         <p class="in">我不喜欢CSS3</p>
  23.         <ul>
  24.             <li class="in">我不想学PHP</li>
  25.             <li class="in">我不想学PHP</li>
  26.             <li class="in">我不想学PHP</li>
  27.             <li class="in">我不想学PHP</li>
  28.             <li class="in">我不想学PHP</li>
  29.         </ul>
  30.         <p class="in">我不喜欢CSS4</p>
  31.         <p class="in">我不喜欢CSS5</p>
  32.         <p class="in">我不喜欢CSS6</p>
  33.     </div>
  34. </body>
  35. </html>

代码运行效果如下：

1.1.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>CSS选择器</title>
  8.     <style>
  9.               /* 链式语法 */
  10.               .item>.in.list{
  11.                 background-color: green;
  12.               }
  13.               /* 兄弟:+* */
  14.               .item>.in.list+*{
  15.                 background-color: green;
  16.               }
  18.     </style>
  19. </head>
  20. <body>
  21.     <!-- 父子关系:div与p标签 -->
  22.     <div class="item">
  23.         <p class="in">我不喜欢CSS1</p>
  24.         <p class="in">我不喜欢CSS2</p>
  25.         <p class="in">我不喜欢CSS3</p>
  26.         <ul>
  27.             <li class="in">我不想学PHP</li>
  28.             <li class="in">我不想学PHP</li>
  29.             <li class="in">我不想学PHP</li>
  30.             <li class="in">我不想学PHP</li>
  31.             <li class="in">我不想学PHP</li>
  32.         </ul>
  33.         <p class="in list">我不喜欢CSS4</p>
  34.         <p class="in">我不喜欢CSS5</p>
  35.         <p class="in">我不喜欢CSS6</p>
  36.     </div>
  37. </body>
  38. </html>

代码运行效果如下：

" class="reference-link">

1.1.4 所有：同级关系

  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>CSS选择器</title>
  8.     <style>
  9.               /* 链式语法 */
  10.               .item>.in.list{
  11.                 background-color: green;
  12.               }
  13.               /* 兄弟:+* */
  14.               .item>.in.list+*{
  15.                 background-color: green;
  16.               }
  17.               /* 所有: ~ */
  18.               .item>.in.list~*{
  19.                 background-color: green;
  20.               }
  22.     </style>
  23. </head>
  24. <body>
  25.     <!-- 父子关系:div与p标签 -->
  26.     <div class="item">
  27.         <p class="in">我不喜欢CSS1</p>
  28.         <p class="in">我不喜欢CSS2</p>
  29.         <p class="in">我不喜欢CSS3</p>
  30.         <ul>
  31.             <li class="in">我不想学PHP</li>
  32.             <li class="in">我不想学PHP</li>
  33.             <li class="in">我不想学PHP</li>
  34.             <li class="in">我不想学PHP</li>
  35.             <li class="in">我不想学PHP</li>
  36.         </ul>
  37.         <p class="in list">我不喜欢CSS4</p>
  38.         <p class="in">我不喜欢CSS5</p>
  39.         <p class="in">我不喜欢CSS6</p>
  40.         <p class="in">我不喜欢CSS7</p>
  41.         <p class="in">我不喜欢CSS8</p>
  42.         <p class="in">我不喜欢CSS9</p>
  43.     </div>
  44. </body>
  45. </html>

代码运行效果如下:

" class="reference-link">

1.2 选择器-伪类

1.2.1 用伪类获取第一个和最后一个item

  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.         /* 伪类-匹配第一个class */
  10.         /* .list > p.first {
  11.             background-color: rgb(233, 0, 0);
  12.         } */
  14.         /* 伪类获取第一个和最后一个item */
  15.         .list > p:first-of-type {
  16.             background-color: rgb(233, 0, 0);
  17.         }
  18.         .list > p:last-of-type {
  19.             background-color: rgb(0, 255, 17);
  20.         }
  22.     </style>     
  23. </head>
  24. <body>
  25.     <div class="list">
  26.         <p class="item first">paragraph1</p>
  27.         <p class="item">paragraph2</p>
  28.         <p class="item">paragraph3</p>
  29.         <p class="item">paragraph4</p>
  30.         <p class="item">paragraph5</p>
  31.         <p class="item">paragraph6</p>
  32.         <p class="item">paragraph7</p>
  33.         <p class="item">paragraph8</p>
  34.         <p class="item">paragraph9</p>
  35.         <p class="item">paragraph10</p>
  36.     </div>
  37. </body>
  38. </html>

代码运行效果如下:

1.2.1 用伪类获取第一个和最后一个item

  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.         /* 伪类获取前三个item */
  10.         /* 公式=an+b  */
  11.         .list > p:nth-of-type(-n+3) {
  12.             background-color: rgb(233, 0, 0);
  13.         }
  14.         .list > p:nth-last-of-type(-n+3){
  15.             background-color: rgb(0, 255, 17);
  16.         }
  18.     </style>     
  19. </head>
  20. <body>
  21.     <div class="list">
  22.         <p class="item first">paragraph1</p>
  23.         <p class="item">paragraph2</p>
  24.         <p class="item">paragraph3</p>
  25.         <p class="item">paragraph4</p>
  26.         <p class="item">paragraph5</p>
  27.         <p class="item">paragraph6</p>
  28.         <p class="item">paragraph7</p>
  29.         <p class="item">paragraph8</p>
  30.         <p class="item">paragraph9</p>
  31.         <p class="item">paragraph10</p>
  32.     </div>
  33. </body>
  34. </html>

代码运行效果如下:

上一条：1020作业class的权重和伪类下一条：作业标题：1020作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多