简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css基本、上下文、伪类、表单选择器
Blogger Information
Blog 14
fans 0
comment 0
visits 7555
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
css基本、上下文、伪类、表单选择器
鹏建
Original
487 people have browsed it

简单选择器

选择器优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>简单选择器</title>
  8.     <style>
  9.         /*元素选择器  */
  10.         li{ color:blue;}  
  12.    /* 群组选择器 */
  13.       h2,ul{font-size: 25px;}
  15.    /* 通配选择器 */
  16.     *{font-weight: bold;}
  18.        /* 属性选择器 */
  19.     *[title]{background-color: lightblue;}
  20. *[title=news]{font-style: italic;}
  22.        /* 类选择器 */
  23.     .radieo{background-color: #7cfc00;}
  25.     /* id选择器 */
  26. #cartoon{background-color: lightcoral;}
  28. /* 标签选择器权重大于通配选择器 */
  29. li{font-weight: normal;}
  31. /* 类选择器权重大于标签选择器 */
  32.    .radieo{color: orange;}
  34. /* id选择器权重大于类选择器 */
  35. #radieo{background-color:red;}
  37.     </style>
  38. </head>
  39. <body>
  40.     <h2>节目列表</h2>
  41.     <ul>
  42.         <li title="news" class="news">早间新闻</li>
  43.         <li title="knowledge">知识大讲堂</li>
  44.         <li>今日说法</li>
  45.         <!-- /行内样式权重大于id选择器  -->
  46.         <li id="cartoon" style="background-color: orangered;">动画片</li>
  47.         <li>娱乐快递</li>
  48.         <li class="radieo" id="radieo">电视剧</li>
  49.     </ul>
  50. </body>
  51. </html>

上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>上下文选择器</title>
  8.     <style>
  9.        /* 后代选择器 */
  10.         body *{ color:green;font-size: 25px;}
  12.          /* 父子选择器 */
  13.         ul>li{list-style-type: none;}
  15.          /* 同级相邻选择器 */
  16.         .news + .program{background-color: lawngreen;}
  18.    /* 同级所有选择器 */
  19. .program.cartoon ~ .program{background-color: yellow;}
  21.     </style>
  22. </head>
  23. <body>
  24.     <h2 >节目列表</h2>
  25.     <ul>
  26.         <li class="news">早间新闻</li>
  27.         <li class="program">知识大讲堂</li>
  28.         <li class="program">今日说法</li>
  29.         <li class="program cartoon">动画片</li>
  30.         <li class="program">娱乐快递</li>
  31.         <li class="program">电视剧</li>
  32.     </ul>
  33. </body>
  34. </html>

伪类选择器不分组1

伪类选择器不分组2

伪类选择器不分组3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>伪类选择器（不分组）</title>
  8.     <style>
  9. tr:first-child{background-color: pink;}
  11. tr:last-child{background-color: yellow;}
  13. tr:nth-child(3){background-color: yellowgreen;}
  15. /* 前两个子元素 */
  16. tr:nth-child(-n+2){background-color: blue;}
  18.  /* 后四个子元素 */  
  19.  tr:nth-last-child(-n+4){background-color: lightpink;}
  21. /* 奇数子元素 */
  22. tr:nth-child(2n+1){background-color:teal;}
  23. /* tr:nth-child(odd){background-color:teal;} */
  25. /* 偶数子元素 */
  26. tr:nth-child(2n){background-color:lightsalmon;}
  27. /* tr:nth-child(even){background-color:lightsalmon;} */
  28.     </style>
  29. </head>
  30. <body>
  31.     <table border="2" cellpadding="10" cellspacing="0" font-align="center"> 
  32.         <caption style="font-size:30px;color:red;">基本信息</caption>
  33.         <tr>
  34.             <td>序号</td>
  35.             <td>姓名</td>
  36.             <td>性别</td>
  37.             <td>年龄</td>
  38.         </tr>
  39.             <tr>
  40.                 <td>1</td>
  41.                 <td></td>
  42.                 <td></td>
  43.                 <td></td>
  44.             </tr>
  45.             <tr>
  46.                  <td>2</td>
  47.                  <td></td>
  48.                  <td></td>
  49.                  <td></td>
  50.             </tr>
  51.             <tr>
  52.                 <td>3</td>
  53.                 <td></td>
  54.                 <td></td>
  55.                 <td></td>
  56.             </tr>
  57.             <tr>
  58.                     <td>4</td>
  59.                     <td></td>
  60.                     <td></td>
  61.                     <td></td>
  62.              </tr>   
  63.              <tr>
  64.                     <td>5</td>
  65.                     <td></td>
  66.                     <td></td>
  67.                     <td></td>
  68.              </tr>             
  69.     </table>
  71. </body>
  72. </html>

伪类选择器分组1

伪类选择器分组2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>伪类选择器（分组）</title>
  8.     <style>
  9. div{padding: 20px;}
  10.         table{text-align: center;margin: 20px;}
  11.  .tbody1 tr:first-of-type{background-color: pink;} 
  13. .tbody2 tr:last-of-type{background-color: yellow;} 
  15.  .tbody2 tr:nth-of-type(3){background-color: yellowgreen;} 
  17. /* 前两个子元素 */
  18.  .tbody2 tr:nth-of-type(-n+2){background-color: lightblue;}   
  20.  /* 后四个子元素 */  
  21. .tbody1 tr:nth-last-type(-n+2){background-color: lightgreen;}  
  23. /* 奇数子元素 */
  24. .tbody1 tr:nth-of-type(2n+1){background-color:lightgreen;} 
  25. /*tbody1 tr:nth-of-type(odd){background-color:teal;} */
  27. /* 偶数子元素 */
  28. .tbody2 tr:nth-of-type(2n){background-color:lightsalmon;} 
  29. /* tbody2 tr:nth-child(even){background-color:lightsalmon;} */
  30.     </style>
  31. </head>
  32. <body>
  33.     <div>
  34.     <table border="2" cellpadding="10" cellspacing="0"  > 
  35.         <caption style="font-size:30px;color:red;">基本信息</caption>
  36.         <thead>
  37.             <th>序号</th>
  38.             <th>姓名</th>
  39.             <th>性别</th> 
  40.             <th>年龄</th>
  41.         </thead>
  42.            <tbody class="tbody1">
  43.         <tr>
  44.                 <td>1</td>
  45.                 <td></td>
  46.                 <td></td>
  47.                 <td></td>
  48.             </tr>
  49.             <tr>
  50.                  <td>2</td>
  51.                  <td></td>
  52.                  <td></td>
  53.                  <td></td>
  54.             </tr>
  55.             <tr>
  56.                 <td>3</td>
  57.                 <td></td>
  58.                 <td></td>
  59.                 <td></td>
  60.            </tr>
  61.         </tbody>
  62.             <tbody class="tbody2">
  63.             <tr>
  64.                 <td>1</td>
  65.                 <td></td>
  66.                 <td></td>
  67.                 <td></td>
  68.             </tr>
  69.             <tr>
  70.                     <td>2</td>
  71.                     <td></td>
  72.                     <td></td>
  73.                     <td></td>
  74.              </tr>   
  75.              <tr>
  76.                     <td>3</td>
  77.                     <td></td>
  78.                     <td></td>
  79.                     <td></td>
  80.              </tr> 
  81.              <tr>
  82.                 <td>4</td>
  83.                 <td></td>
  84.                 <td></td>
  85.                 <td></td>
  86.          </tr> 
  87.             </tbody>            
  88.     </table>
  90. </body>
  91. </div>
  92. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10. .username:active{font-size:larger;}
  11. #password:focus{background-color:lightpink;}
  12. .password:hover{color: red;}
  13. a:link{color: blue;}
  14. a:visited{color:green}
  15. input:not(class){color:darkorange;}
  16. </style>
  17. <body>
  18.     <a href="http://baidu.com/" target="blank">百度</a>
  19.     <a href="https://www.php.cn/">php中文网</a>
  20. <form action="" method="get">
  21.         <h2 >用户注册</h2>
  22.         <section>
  23.             <label for="username" class="username">用户名：</label>
  24.             <input type="text" name="username" id="username" placeholder="手机/邮箱/账号" maxlength="18" size="20" autofocus/>
  25.         </section>
  26.         <section></section>
  27.             <label for="password" class="password">密码：</label>
  28.             <input type="password" id="password" name="password" placeholder="由字母、数字和下划线组成" maxlength="16" size="20"/ required>
  29.         </section>
  30.         <br>
  31.             <input  type="submit" value="提交" />
  32.             </form>
  33.         </body>
  34.         </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！