伪类的分类详解与盒模型

伪类的分类

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. }
  4. .biaoge1 > li:nth-of-type(2n){
  5. background-color:red;
  6. }
  7. /* 状态伪类 */
  8. option:disabled{
  9. color: red;
  10. }
  11. select:hover{
  12. cursor: pointer;
  13. background-color: blue;
  14. }
  15. .alarm{
  16. color: seagreen;
  17. background-color: black;
  18. }
  19. ol > li >a {
  20. color: red;
  21. border-bottom: none;
  22. }
  23. .box{
  24. width: 40px;
  25. height: 40px;
  26. margin: 10px 20px 30px 40px;
  27. border:1px solid;
  28. padding: 30px 30px ;
  29. background-color: yellow;
  30. }

效果

更多相关文章

  1. android 设置控件的透明度
  2. 探究J2ME和Android的几大区别
  3. Android实现屏幕旋转方法
  4. android rtmp推流直播学习(一)----视频采集
  5. Android(安卓)网络框架 Retrofit2.0介绍、使用和封装
  6. 巧妙设置Android来方便管理Linux和Windows
  7. Android使用WebView加载文字总结之中文乱码、禁止横向滚动、自动
  8. windows系统上安装与使用Android(安卓)NDK r5
  9. Android亮度调节的几种实现方法

随机推荐

  1. 对Android初学者学习中的几点建议
  2. 最近Android挺火啊,都没有什么感想吗
  3. Android(安卓)抽屉效果的导航菜单实现
  4. 华硕 Eee Pad Transformer 3G 版本台湾地
  5. Android省电策略
  6. [android] HttpURLConnection的初步学习
  7. android关于使用哪个版本开发的讨论
  8. Android状态栏和虚拟导航栏的适配总结
  9. [Android]Android SDK 2.3与Eclipse最新
  10. 自定义Seekbar拖动条式样