伪类选择器

常用伪类选择器我们简单分为三种

  • 结构伪类
    • :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。参数是元素的索引。索引从1开始
    • n可以是一个数字,一个关键字,或者一个公式
    • 使用公式(an+ b).描述:a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量
  • 状态伪类
  • 链接伪类
名称用法
结构伪类li:nth-of-type();p:nth-child()
状态伪类input:disabled
链接伪类a:link;a:hover
  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>伪类选择器</title>
  8. <link rel="stylesheet" href="css/style.css">
  9. </head>
  10. <body>
  11. <ul>
  12. <li>item1</li>
  13. <li>item2</li>
  14. <li>item3</li>
  15. <li>item4</li>
  16. <li>item5</li>
  17. <li>item6</li>
  18. <li>item7</li>
  19. <li>item8</li>
  20. </ul>
  21. </body>
  22. </html>
  23. /* CSS文件 */
  24. /* 选择第一个 */
  25. li:nth-of-type(1) {
  26. background-color: blue;
  27. }
  28. /* 选择最后一个 */
  29. li:nth-last-of-type(1) {
  30. border: 5px solid violet;
  31. }
  32. /* 选择全部 */
  33. li:nth-of-type(n) {
  34. background-color: blueviolet;
  35. }
  36. /* 选择奇数 */
  37. li:nth-of-type(2n+1) {
  38. background-color: yellow;
  39. }
  40. /* 选择前三个 */
  41. li:nth-of-type(-n+3) {
  42. background-color: cornflowerblue;
  43. }
  44. /* 选择最后三个 */
  45. li:nth-last-of-type(-n+3) {
  46. background-color: aqua;
  47. }
  48. /* 选择偶数 */
  49. li:nth-of-type(even) {
  50. color: brown;
  51. }
  52. /* 选择奇数 */
  53. li:nth-of-type(odd) {
  54. border: 5px solid red;
  55. }

盒模型常见属性

盒模型常用属性有

  • margin:外边距
  • border:边框
  • padding:内边距
  • box-sizing:定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等
  • background-clip:指定背景绘制区域
  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>盒模型</title>
  8. <link rel="stylesheet" href="css/style2.css">
  9. </head>
  10. <body>
  11. <div class="box">我是盒子</div>
  12. </body>
  13. </html>
  14. /* CSS代码 */
  15. .box {
  16. height: 150px;
  17. width: 200px;
  18. background-clip: content-box;
  19. border: 3px dashed yellowgreen;
  20. box-sizing: border-box;
  21. margin: 0px;
  22. padding: 5px;
  23. background-color: blueviolet;
  24. color: burlywood;
  25. }

更多相关文章

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

随机推荐

  1. android音乐播放器源案例源码
  2. Android UI 之时间与日期控件
  3. 在Ubuntu10.04上设置和下载android4.0源
  4. Android 自定义Progress Bar
  5. android SubscriptionInfo更新流程
  6. android 获取包名的两种方式
  7. sdk\tools目录下的traceview.bat无法找
  8. Android中将资源文件转为Bitmap对象
  9. android获取手机信息
  10. Android中贪吃蛇游戏的学习(四)