简体中文（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基本、上下文、伪类、表单选择器

鹏建
鹏建原创
2020年04月07日 23:53:09486浏览

简单选择器

选择器优先级

  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>
上一条：CSS选择器基础知识和实例下一条：前端开发之细说CSS选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多