Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 基本,上下文,伪类(结构,状态)选择器的各种应用
Blogger Information
Blog 19
fans 0
comment 0
visits 5770
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
基本,上下文,伪类(结构,状态)选择器的各种应用
vbokok
Original
355 people have browsed it
  1. /* 基本选择器 */
  2. h2{
  3.     color:aqua
  4. }
  5. h2.spring {
  6.     color:blue
  7. }
  8. h2#item {
  9.     color:red
  10. }
  13. /* 上下文选择器 */
  14. /* 父子选择器 */
  15. ul.list > .ent {
  16.     border: thin solid;
  17. }
  18. /* 后代选择器 */
  19. ul.list >.ent .entent {
  20.     color:blue
  21. }
  22. /* 兄弟选择器 */
  23. ul.list > .ent.start + * {
  24.     background-color: blueviolet;
  25. }
  26. /* 同级选择器 */
  27. ul.list > .ent.cken ~ * {
  28.     color: indianred;
  29. }
  31. /* 伪类选择器 */
  32. ul.bord > :first-child {
  33.     color: tomato;
  34. }
  35. ul.bord > :last-child {
  36.     color: blue;
  37. }
  38. ul.bord > :nth-child(2n + 2) {
  39.     color:deeppink
  40. }
  41. /* ! 状态伪类 */
  42. fieldset {
  43.   display: inline-grid;
  44.   gap: 1em;
  45.   border-radius: 10px;
  46.   padding: 1em 2em;
  47.   color: #666;
  48.   background: linear-gradient(to left top, lightcyan, white);
  49. }
  51. fieldset legend {
  52.   text-align: center;
  53. }
  55. fieldset input {
  56.   padding: 5px;
  57.   border: none;
  58.   border-bottom: 1px solid #666;
  59.   outline: none;
  60.   background-color: transparent;
  61. }
  63. /* ---------------------------- */
  64. fieldset :focus {
  65.     background-color: lightsalmon;
  66. }
  67. input[type='checkbox']:checked + label {
  68.     color: red;
  69. }
  70. button:hover {
  71.     cursor: pointer;
  72.     opacity: 0.2;
  73. }
  78. <!DOCTYPE html>
  79. <html lang="zh-CN">
  80. <head>
  81.     <meta charset="UTF-8">
  82.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  83.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  84.     <link rel="stylesheet" href="css/0205selector.css">
  85.     <title>Document</title>
  86. </head>
  87. <body>
  88.     <!-- 基本选择器 -->
  89.     <h2>Hello World</h2>
  90.     <h2 class="spring">Hello spring</h2>
  91.     <h2 id="item">Hello everybody</h2>
  92.     <hr />
  94.     <!-- 上下文选择器 -->
  95.     <ul class="list">
  96.         <li class="ent">实例1</li>
  97.         <li class="ent">实例2</li>
  98.         <li class="ent">
  99.             <ul>
  100.                 <li class="entent">item1</li>
  101.                 <li class="entent">item2</li>
  102.                 <li class="entent">item3</li>
  103.             </ul>
  104.         </li>
  105.         <li class="ent">实例4</li>
  106.         <li class="ent start">实例5</li>
  107.         <li class="ent ">实例6</li>
  108.         <li class="ent cken">实例7</li>
  109.         <li class="ent">实例8</li>        
  110.         <li class="ent">实例9</li>  
  111.     </ul>
  112.     <hr/>
  113.     <!-- 伪元素选择器 -->
  114.     <ul class="bord">
  115.         <li>item1</li>
  116.         <li>item2</li>
  117.         <li>item3</li>
  118.         <li>item4</li>
  119.         <li>item5</li>
  120.         <li>item6</li>
  121.         <li>item7</li>
  122.         <li>item8</li>
  123.         <li>item9</li>
  124.         <li>item10</li>
  125.         <li>item11</li>
  126.     </ul>
  127.     <hr >
  128.     <!-- 状态伪类 -->
  129.     <form action="">
  130.       <fieldset>
  131.         <legend>用户注册</legend>
  132.         <!-- autofocus: 布尔属性,自动获取焦点 -->
  133.         <input type="text" id="username" name="username" placeholder="用户名" required autofocus />
  134.         <input type="email" id="email" name="email" placeholder="邮箱" required disabled />
  135.         <input type="password" id="password" name="password" placeholder="密码" required />
  136.         <!-- 复选框默认是选中状态: checked -->
  137.         <div>
  138.           <input type="checkbox" id="rem" name="remember" checked />
  139.           <label for="rem">记住我</label>
  140.         </div>
  141.         <button>提交</button>
  142.       </fieldset>
  143.     </form>
  144. </body>
  145. </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