ASCII码 ASCII码

伪类的分类详解与盒模型

发布于：2022-07-11 12:50:48  栏目：技术文档

伪类的分类详解与盒模型

伪类的分类

1. 结构伪类

1.1 nth-of-type():正向读取选择 1.2 nth-last-of-type():反向读取选择 1.3 first-of-type:第一个 1.4 last-of-type:最后一个 1.5 nth-of-type(even):偶数 1.6 nth-of-type(odd):奇数 1.7 实际nth-of-type():为 an+b a：系数（默认为1，n为参数（从0开始） b：为偏移量（从第几个开始） 1.8 a=1时，从上往下选择，a=-1时，从下往上选择 1.9 2n+1=odd表示奇数项选择，2n=even为偶数项选择

2. 状态伪类

2.1 根据类的状态进行选择 2.2 表单伪类根据标签状态选择

3. 盒模型

3.1 margin：外边距，不可见，无法设置样式，只能设置宽度，高度 3.2 padding：内边距，不可见，无法设置样式，只能设置宽度，高度 3.3 border:边框，可见属性，颜色，样式，宽度均可设置 3.4 content：内容区，可见属性，颜色，样式，宽度均可设置 3.5 样式box-sizing：content-box -w3c的标准盒子，大小为：实际设置盒子大小+padding以及border的四边大小，marging不算在内 3.6 样式box-sizing：border-box，实际盒子大小为实际设置值

源码

  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="demo1.css">
  9. </head>
  10. <body>
  11.     <ul class="biaoge1">
  12.         <li>item1</li>
  13.         <ul class="biaoge2">
  14.             <li>案例1</li>
  15.             <li>案例2</li>
  16.             <li>案例3</li>
  17.             <li>案例4</li>
  18.             <li>案例5</li>
  19.             <li>案例6</li>
  20.         </ul>
  21.         <li>item2</li>
  22.         <li>item3</li>
  23.         <li>item4</li>
  24.         <li>item5</li>
  25.         <li>item6</li>
  26.         <li>item7</li>
  27.         <li>item8</li>
  28.     </ul>
  29.     <br>
  30.     <form action="">
  31.         <!-- 表单分组 -->
  32.         <fieldset>
  33.             <legend>用户注册</legend>
  34.             <label for="uname">用户名</label>
  35.             <input type="text" id="uname">
  36.             <br>
  37.             <!-- 提示 -->
  38.             <label for="tips" class="alarm">警告：</label>
  39.             <input type="text" id="uname" value="注册禁止注销" disabled>
  40.             <div>
  41.                 <label for="">兄弟姐妹中最高的学历:</label>
  42.                 <select name="edu" id="">
  43.                     <option value="0" selected disabled>--请选择--</option>
  44.                     <option value="1">研究生</option>
  45.                     <option value="2">博士</option>
  46.                     <option value="3" >博士后</option>
  47.                 </select>
  48.             </div>
  49.             <ol class="nav">
  50.                 <li><a href="../0705/demo1.html" target="content">页面1</a></li>
  51.                 <li><a href="../0705/demo2.html" target="content">页面2</a></li>
  52.                 <li><a href="../0705/demo3.html" target="content">页面3</a></li>
  53.             </ol>
  54.         </fieldset>
  55.         <div class="box">
  56.             <a href="../0705/demo1.html" target="content">页面3</a>
  57.         </div>
  58.     </form>
  59. </body>
  60. </html>

css代码

  1. .biaoge1 > .biaoge2 > li:nth-of-type(n+3){
  2.     background-color: yellow;
  3. }
  5. .biaoge1 > li:nth-of-type(2n){
  6.     background-color:red;
  7. }
  10. /* 状态伪类  */
  12. option:disabled{
  13.     color: red;
  14. }
  16. select:hover{
  17.     cursor: pointer;
  18.     background-color: blue;
  19. }
  21. .alarm{
  22.     color: seagreen;
  23.     background-color: black;
  24. }
  26. ol > li >a {
  27.     color: red;
  28.     border-bottom: none;
  29. }
  31. .box{
  32.     width: 40px;
  33.     height: 40px;
  34.     margin: 10px 20px 30px 40px;
  35.     border:1px solid;
  36.     padding: 30px 30px ;
  37.     background-color: yellow;
  38. }

效果

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行