css伪类选择器

结构伪类

  1. <body>
  2. <div>
  3. <ul>
  4. <li>
  5. <p>我是1</p>
  6. </li>
  7. <li>
  8. <p>我是2</p>
  9. </li>
  10. <li>
  11. <p>我是3</p>
  12. </li>
  13. <li>
  14. <p>我是4</p>
  15. </li>
  16. <li>
  17. <p>我是5</p>
  18. </li>
  19. <li>
  20. <p>我是6</p>
  21. </li>
  22. <li>
  23. <p>我是7</p>
  24. </li>
  25. <li>
  26. <p>我是8</p>
  27. </li>
  28. <li>
  29. <p>我是9</p>
  30. </li>
  31. </ul>
  32. </div>
  33. <style>
  34. li:nth-of-type(n){
  35. color: red;
  36. }
  37. </style>
  38. </body>

效果图

image-20220707231151668

选择1-6

  1. <body>
  2. <div>
  3. <ul>
  4. <li>
  5. <p>我是1</p>
  6. </li>
  7. <li>
  8. <p>我是2</p>
  9. </li>
  10. <li>
  11. <p>我是3</p>
  12. </li>
  13. <li>
  14. <p>我是4</p>
  15. </li>
  16. <li>
  17. <p>我是5</p>
  18. </li>
  19. <li>
  20. <p>我是6</p>
  21. </li>
  22. <li>
  23. <p>我是7</p>
  24. </li>
  25. <li>
  26. <p>我是8</p>
  27. </li>
  28. <li>
  29. <p>我是9</p>
  30. </li>
  31. </ul>
  32. </div>
  33. <style>
  34. li:nth-of-type(-n+6){
  35. color: red;
  36. }
  37. </style>
  38. </body>

效果截图展示

image-20220707232130518

选择6-9

  1. <body>
  2. <div>
  3. <ul>
  4. <li>
  5. <p>我是1</p>
  6. </li>
  7. <li>
  8. <p>我是2</p>
  9. </li>
  10. <li>
  11. <p>我是3</p>
  12. </li>
  13. <li>
  14. <p>我是4</p>
  15. </li>
  16. <li>
  17. <p>我是5</p>
  18. </li>
  19. <li>
  20. <p>我是6</p>
  21. </li>
  22. <li>
  23. <p>我是7</p>
  24. </li>
  25. <li>
  26. <p>我是8</p>
  27. </li>
  28. <li>
  29. <p>我是9</p>
  30. </li>
  31. </ul>
  32. </div>
  33. <style>
  34. li:nth-of-type(n+6){
  35. color: red;
  36. }
  37. </style>
  38. </body>

效果截图展示

image-20220707232251599

状态伪类

将鼠标移入按钮变成小手并改变背景颜色

  1. <body>
  2. <div>
  3. <button class="anniu">我是按钮</button>
  4. </div>
  5. <style>
  6. .anniu{
  7. border: 0px;
  8. background-color: coral;
  9. color: white;
  10. }
  11. .anniu:hover {
  12. cursor: pointer;
  13. background-color: darkslategray;
  14. }
  15. </style>
  16. </body>

移入前效果截图演示

image-20220707233249823

移入后效果截图演示

image-20220707233349507

盒子

div宽度150,高度300,内边距10px,边框5px。

  1. <body>
  2. <div class="box"></div>
  3. <style>
  4. .box {
  5. box-sizing: border-box;
  6. width: 150px;
  7. height: 300px;
  8. padding: 10px;
  9. border: 5px;
  10. border-color: black;
  11. background-color: bisque;
  12. }
  13. </style>
  14. </body>

效果截图演示

image-20220707234049706

image-20220707234217767

更多相关文章

  1. 手动部署Android-apk应用到模拟器
  2. Android(安卓)4.0 界面
  3. Android大图片裁剪终极解决方案(中:从相册截图)
  4. 阿里app法人认证备案流程
  5. android网络连接使用GET方式请求服务器时的setDoOutput(true)惹
  6. Android(安卓)屏幕截图 代码
  7. Android(安卓)屏幕截图 代码
  8. Android(安卓)ListView下滑会报空指针异常
  9. android之monkeyrunner截图及图像对比

随机推荐

  1. android send key event
  2. android 学习链接大集合
  3. Android ListView(Selector 颜色)
  4. linux下获取环境变量(Android)
  5. Android(安卓)获取最新图片
  6. Google code android开源项目(一)
  7. android源码链接
  8. Android 使用AsyncHttpClient文件上传与
  9. 第一行代码Android第三课
  10. Android 开源源代码收集(不断更新中...)