伪类选择器与盒模型

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <link rel="stylesheet" href="fake.css">
  8.     <title>结构伪类选择器及权重</title>
  9. </head>
  10. <body>
  11.     <ul class="list">
  12.         <li class="item">item1</li>
  13.         <li class="item">item2</li>
  14.         <li class="item">item3</li>
  15.         <li class="item">item4</li>
  16.         <li class="item">item5</li>
  17.         <li class="item">item6</li>
  18.         <li class="item">item7</li>
  19.         <li class="item">item8</li>
  20.         <li class="item">item9</li>
  21.         <li class="item">item10</li>
  22.     </ul>
  23. </body>
  24. </html>
  1. 权重对比：
  2. ul{
  3.     background: lightblue;
  4. }
  5. body ul{
  6.     background-color: beige;
  7. }
  8. html body ul.list#title{
  9.     background-color: lightcoral;
  10. }
  12. 结构伪类：
  13. .list>.item:nth-child(-n+4){
  14.     background-color: yellow;
  15. }
  16. .list>.item:nth-child(3n+1){
  17.     background-color: gray;
  18. }
  19. .list>.item:first-child{
  20.     background-color: violet;
  21. }
  22. .list>.item:last-child{
  23.     background-color: green;
  24. }
  25. .list>.item:nth-last-child(3){
  26.     background-color: lightgray;
  27. }

结构伪类选择器及权重

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <link rel="stylesheet" href="status.css" />
  9. </head>
  10. <body>
  11.     <form action="register.php" method="post">
  12.         <fieldset class="login" style="display: inline-grid; gap: 1em">
  13.             <legend class="title">新用户注册</legend>
  14.             <div class="username">
  15.                 <label for="uname">用户名</label>
  16.                 <input type="text" id="uname" name="uname" value="" placeholder="请输入用户名(不少于6位)" required autofocus>
  17.             </div>
  19.             <div class="email">
  20.                 <label for="email">邮箱：</label>
  21.                 <input type="email" name="email" id="email" placeholder="username@email.com">
  22.             </div>
  24.             <div class="sex">
  25.                 <label for="male">性别：</label>
  26.                 <!-- input.type中的name是提交到服务器的 -->
  27.                 <input type="radio" name="sex" value="male" id="male" checked><label for="male">男</label>
  28.                 <input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
  29.                 <input type="radio" name="sex" value="secret" id="secret"><label for="secret">保密</label>
  30.             </div>
  31.             <button class="submit">提交</button>
  32.         </fieldset>
  33.     </form>
  34. </body>
  35. </html>
  1. .login :focus {
  2.     outline: 1px solid red;
  3.     border: none;
  4.   }
  5.   .login :required {
  6.     background-color: lightgoldenrodyellow;
  7.   }
  8.   .login :checked + label {
  9.     color: red;
  10.   }
  11.   .login > .submit:hover {
  12.     cursor: pointer;
  13.     background-color: gold;
  14.     color: white;
  15.   }

状态伪类选择器
盒模型

总结：

本次课学的状态伪类选择器挺常用的，可以大大提高用户体验；权重部分的内容比较简单，放在结构伪类选择器中一起验证了；容器用过，但没用好，基本都是width100%，学了盒模型布局网页的框架就有了。

【文章原创作者：美国服务器 http://www.558idc.com/mg.html提供，感恩】
更多阅读