简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 伪类的分类详解与盒模型
Blogger Information
Blog 25
fans 1
comment 0
visits 12885
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
伪类的分类详解与盒模型
xueblog9的进阶之旅
Original
458 people have browsed it

伪类的分类详解与盒模型

伪类的分类

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. }

效果

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！