search

博客列表 >CSS选择器基础

CSS选择器基础

alex
alex原创
2023年02月16日 17:37:34348浏览

展示基本,上下文,伪类(结构,状态)选择器

基本选择器

上下文选择器

父子 : >

后代: 空格

兄弟: +

同级: ~

伪类选择器

结构伪类

  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>Document</title>
  8.     <style>
  9.         ul>li:first-child {
  10.             color: blue;
  11.         }
  12.         ul>li:last-child{
  13.             color: red;
  14.         }
  15.         ul>li:nth-child(2n+1){
  16.             background-color: aquamarine;
  17.         }
  18.         ul>li:nth-last-child(2n+2){
  19.             background-color: violet;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <ul>
  25.         <li>item1</li>
  26.         <li>item2</li>
  27.         <li>item3</li>
  28.         <li>item4</li>
  29.         <li>item5</li>
  30.     </ul>
  31. </body>
  32. </html>

效果图

状态伪类

  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>Document</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <form action="">
  12.         <fieldset>
  13.           <legend>用户注册</legend>
  14.             <input type="text" id="username" name="username" placeholder="用户名" required autofocus />
  15.             <input type="email" id="email" name="email" placeholder="邮箱" required disabled />
  16.             <input type="password" id="password" name="password" placeholder="密码" required />
  17.             <div>
  18.             <input type="checkbox" id="rem" name="remember" checked />
  19.             <label for="rem">记住我</label>
  20.             </div>
  21.           <button>提交</button>
  22.         </fieldset>
  23.       </form>
  24.     </body>
  25.   </html>
  26. </body>
  27. </html>
  1. fieldset {
  2.     display: inline-grid;
  3.     gap: 1em;
  4.     border-radius: 10px;
  5.     padding: 1em 2em;
  6.     color: #666;
  7.     background: linear-gradient(to left top, lightcyan, white);
  8.   }
  10.   fieldset legend {
  11.     text-align: center;
  12.   }
  14.   fieldset input {
  15.     padding: 5px;
  16.     border: none;
  17.     border-bottom: 1px solid #666;
  18.     outline: none;
  19.     background-color: transparent;
  20.   }
  21.   button:hover {
  22.     cursor: pointer;
  23.     opacity: 0.9;
  24.   }
  25.   fieldset :disabled {
  26.     background-color: orange;
  27.   }
  28.   input[type="checkbox"]:checked+label {
  29.     color: red;
  30.   }
  31.   fieldset :focus {
  32.     background-color: lightpink;
  33.   }

效果展示

上一条：二十期·前端第一课作业。下一条：vue环境搭建
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多