实例演示伪类选择器: 结构伪类与状态伪类

结构伪类

伪类选择器:nth-of-type(an+b);相当于一个class选择器
a 从0开始,依次是1,2,3,4…
n 从0开始,依次是1,2,3,4…
b 从0开始,依次是1,2,3,4…

选择第一个元素

  1. ul>li:nth-of-type(1){
  2. color: red;
  3. }
  4. ul>li:first-of-type{
  5. background-color: yellow;
  6. }

选择其中一个元素

  1. ul>li:nth-of-type(n){
  2. font-size: 2em;
  3. margin: 5px;
  4. }

选择最后一个元素

  1. ul>li:last-of-type{
  2. color: purple;
  3. }

选择前3个元素

  1. ul>li:nth-of-type(-n+3){
  2. border: 2px solid black;
  3. }

最后3个无素

  1. ul>li:nth-last-of-type(-n+3){
  2. background-color: orange;
  3. }

从第3个元素开始

  1. ul>li:nth-of-type(n+3){
  2. font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  3. }

奇数元素

  1. ul>li:nth-of-type(2n-1){
  2. color: pink;
  3. }
  4. ul>li:nth-of-type(2n+1){
  5. background-color: blue;
  6. }
  7. ul>li:nth-of-type(odd){
  8. border-top: 3px solid red;
  9. }

偶数元素

  1. ul>li:nth-of--type(2n){
  2. border-left: 3px solid pink;
  3. }
  4. ul>li:nth-of-type(even){
  5. border-bottom: 3px solid yellow;
  6. }

结构伪类

状态伪类

  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. button:disabled {
  10. color: red;
  11. background-color: pink;
  12. }
  13. input:checked + label {
  14. color: blue;
  15. }
  16. button:hover {
  17. cursor: pointer;
  18. background-color: coral;
  19. }
  20. input:focus {
  21. background-color: gray;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div>
  27. <label for="uname">用户名:</label>
  28. <input type="text" />
  29. <input type="radio" name="sex" id="male" value="1" checked /> <label for=""></label> <input type="radio" name="sex" id="fmale" value="2" /><label for=""></label>
  30. <button disabled>提交</button>
  31. </div>
  32. </body>
  33. </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. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  13. div {
  14. width: 200px;
  15. height: 100px;
  16. background-color: orange;
  17. border: 10px solid red;
  18. padding: 10px;
  19. margin: 10px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div></div>
  25. </body>
  26. </html>

第一个盒子计算

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. div {
  8. width: 200px;
  9. height: 100px;
  10. background-color: orange;
  11. border: 10px solid red;
  12. padding: 10px;
  13. margin: 10px;
  14. }
  15. </style>

第二种盒子计算

更多相关文章

  1. windows系统上安装与使用Android(安卓)NDK r5
  2. CSS选择器种类
  3. css伪类选择器
  4. 样式分类与选择器详解
  5. html基础:css自定义样式的来源及选择器优先级权重的分析
  6. CSS样式优先级和权重和常用选择器代码演示
  7. css基础:链接形式及选择器的用法
  8. 跟着大牛学PHP--CSS样式和选择器
  9. css自定义样式来源选择器与选择器的权重分析

随机推荐

  1. android cmd adb命令安装和删除apk应用
  2. 区分android:gravity与android:layout_gr
  3. Android 应用程序之道
  4. Android OS历史版本
  5. Android系统介绍及平台特性
  6. Android加密之文件级加密
  7. Android系统构架分析和应用程序目录结构
  8. 各种类型Android Market了解
  9. android遮罩层
  10. Android for opencv(1)android使用opencv基