欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

伪类/盒子模型及单位

程序员文章站 2022-05-25 07:50:03
...

伪类选择器

结构伪类

方法一：

    

  1. <body>
    2. 

  2.     <!-- 结构伪类：根据元素位置获取元素 -->
    3. 

  3.     <ul class="list">
    4. 

  4.       <li>item1</li>
    5. 

  5.       <li>item2</li>
    6. 

  6.       <li>item3</li>
    7. 

  7.       <li>item4</li>
    8. 

  8.       <li>item5</li>
    9. 

  9.       <li>item6</li>
    10. 

  10.       <li>item7</li>
    11. 

  11.       <li>item8</li>
    12. 

  12.     </ul>
    13. 

  13.     <style>
    14. 

  14.       /* 分组结构伪类 */
    15. 

  15.       /* 第一个元素 */
    16. 

  16.       .list > li:nth-of-type(1) {
    17. 

  17.         background-color: violet;
    18. 

  18.       }
    19. 

  19.       /* 最后一个元素 */
    20. 

  20.       .list > li:nth-of-type(8) {
    21. 

  21.         background-color: violet;
    22. 

  22.       }
    23. 

  23.       /* 第5个元素 */
    24. 

  24.       .list > li:nth-of-type(5) {
    25. 

  25.         background-color: violet;
    26. 

  26.       }
    27. 

  27.       /* 选择第5个，相当于倒数第4个元素 */
    28. 

  28.       .list > li:nth-last-of-type(4) {
    29. 

  29.         background-color: red;
    30. 

  30.       }
    31. 

  31.       /* 第一个和倒数第一个元素可以简写 */
    32. 

  32.       .list > li:first-of-type {
    33. 

  33.         color: darkorchid;
    34. 

  34.       }
    35. 

  35.       .list > li:last-of-type {
    36. 

  36.         color: lightblue;
    37. 

  37.       }
    38. 

  38.     </style>
    39. 

  39.   </body>
    40.

方法二

    

  1. <body>
    2. 

  2.     <ul class="list">
    3. 

  3.       <li>item1</li>
    4. 

  4.       <li>item2</li>
    5. 

  5.       <li>item3</li>
    6. 

  6.       <li>item4</li>
    7. 

  7.       <li>item5</li>
    8. 

  8.       <li>item6</li>
    9. 

  9.       <li>item7</li>
    10. 

  10.       <li>item8</li>
    11. 

  11.     </ul>
    12. 

  12.     <style>
    13. 

  13.         /* 实际开发过程中，使用n + b(偏移量)来匹配元素 */
    14. 

  14.       /* 1. 匹配单个，a=0 */
    15. 

  15.       .list > :nth-of-type(0n + 3) {
    16. 

  16.         background-color: lightgreen;
    17. 

  17.       }
    18. 

  18.       .list > :nth-of-type(3) {
    19. 

  19.         background-color: red;
    20. 

  20.       }
    21. 

  21.       /* 2. 匹配一组：a=1 */
    22. 

  22.       .list > :nth-of-type(n) {
    23. 

  23.         background-color: skyblue;
    24. 

  24.       }
    25. 

  25.       /* 匹配第3个子元素后面的所有兄弟元素 */
    26. 

  26.       .list > :nth-of-type(1n + 3) {
    27. 

  27.         color: darkred;
    28. 

  28.       }
    29. 

  29.       /* a=-1,功能与a=1是一样，但是反向取，取前3个 */
    30. 

  30.       .list > :nth-of-type(-n + 3) {
    31. 

  31.         background-color: lightgreen;
    32. 

  32.       }
    33. 

  33.       /* 匹配最后3个 */
    34. 

  34.       .list > :nth-last-of-type(-n + 3) {
    35. 

  35.         background-color: seagreen;
    36. 

  36.       }
    37. 

  37.       /* 2n+0:匹配偶数位元素 even */
    38. 

  38.       .list > :nth-of-type(2n) {
    39. 

  39.         background-color: gray;
    40. 

  40.       }
    41. 

  41.       /* 2n+1:匹配奇数位元素 odd */
    42. 

  42.       .list > :nth-of-type(2n + 1) {
    43. 

  43.         background-color: lightgrey;
    44. 

  44.       }
    45. 

  45.       .list > :nth-of-type(even):hover {
    46. 

  46.         background-color: red;
    47. 

  47.       }
    48. 

  48.       .list > :nth-of-type(odd):hover {
    49. 

  49.         background-color: darkred;
    50. 

  50.       }
    51. 

  51.     </style>
    52. 

  52.   </body>
    53.

状态伪类/表单伪类

    

  1. <body>
    2. 

  2.     <!-- 表单伪类 -->
    3. 

  3.     <input type="text" />
    4. 

  4.     <input type="text" disabled />
    5. 

  5.     <input type="radio" name="sex" id="m" value="0" /><label>男</label>
    6. 

  6.     <input type="radio" name="sex" id="f" value="1" /><label>女</label>
    7. 

  7.     <p>
    8. 

  8.       <button>提交</button>
    9. 

  9.     </p>
    10. 

  10.     <style>
    11. 

  11.       input:disabled {
    12. 

  12.         background-color: yellow;
    13. 

  13.       }
    14. 

  14.       input:enabled {
    15. 

  15.         background-color: cyan;
    16. 

  16.       }
    17. 

  17.       /* 单选按钮选中后，将它的标签文本前景色设置为红色 */
    18. 

  18.       input:checked + label {
    19. 

  19.         color: red;
    20. 

  20.       }
    21. 

  21.       button {
    22. 

  22.         width: 100px;
    23. 

  23.         height: 30px;
    24. 

  24.         border: none;
    25. 

  25.         outline: none;
    26. 

  26.         background-color: seagreen;
    27. 

  27.         color: white;
    28. 

  28.       }
    29. 

  29.       button:hover {
    30. 

  30.         background-color: coral;
    31. 

  31.         cursor: pointer;
    32. 

  32.       }
    33. 

  33.     </style>
    34. 

  34.   </body>
    35.

字体图标引入

1、字体图标下载

https://www.iconfont.cn/ 根据需要挑选自己需要的字体图标，并下载至本地项目根目录，根据需要设置字体图标目录名称（本项目设置为：font）。

伪类/盒子模型及单位

2、字体使用

Font class方式插入

①引入字体CSS文件

  1. <link rel="stylesheet" href="./font/iconfont.css" />

②字体使用

    

  1. <body>
    2. 

  2.     <p><span class="iconfont icon-cart"></span> </p>
    3. 

  3.     <style>
    4. 

  4.       .iconfont.icon-cart {
    5. 

  5.         font-size: 30px;
    6. 

  6.         color: red;
    7. 

  7.       }
    8. 

  8.     </style>
    9. 

  9. </body>
    10.

Symbol 方式插入

①引入字体JS文件

  1. <script src="./font/iconfont.js"></script>

②字体使用

    

  1. <body>
    2. 

  2.    <svg class="icon" aria-hidden="true">
    3. 

  3.      <use xlink:href="#icon-fabulous"></use>
    4. 

  4.    </svg>
    5. 

  5. </body>
    6.

盒模型的属性

盒子模型总共有5个属性分别为：width/height/border/padding/margin

    

  1. <body>
    2. 

  2.     <div class="box">Box</div>
    3. 

  3.     <style>
    4. 

  4.       /* 盒子模型的属性 */
    5. 

  5.       .box {
    6. 

  6.         width: 200px;
    7. 

  7.         height: 200px;
    8. 

  8.         background: violet;
    9. 

  9.         border: 10px dashed currentColor;
    10. 

  10.         background-clip: content-box;
    11. 

  11.         box-sizing: border-box;
    12. 

  12.         /* 值得顺序；上 右 下 左 */
    13. 

  13.         padding: 5px 10px 15px 20px;
    14. 

  14.         /* 三值语法：上 右 下 左 */
    15. 

  15.         padding: 5px 10px 20px;
    16. 

  16.         /* 双值：第一个上下，第二个左右 */
    17. 

  17.         padding: 25px;
    18. 

  18.         /* 单值：四个方向一样 */
    19. 

  19.       }
    20. 

  20.       .box {
    21. 

  21.         border-top: 20px solid red;
    22. 

  22.         border: 5px solid green;
    23. 

  23.       }
    24. 

  24.       /* 样式重置 */
    25. 

  25.       * {
    26. 

  26.         padding: 0;
    27. 

  27.         margin: 0;
    28. 

  28.         box-sizing: border-box;
    29. 

  29.       }
    30. 

  30.     </style>
    31. 

  31.   </body>
    32.

em/rem的区别

说明：em和rem都是相对单位，em当前或父级的font-size绑定，而rem是永远和html中的font-size绑定

    

  1. <body>
    2. 

  2.     <div class="box"></div>
    3. 

  3.     <style>
    4. 

  4.         * {
    5. 

  5.             padding: 0;
    6. 

  6.             margin: 0;
    7. 

  7.             box-sizing: border-box;
    8. 

  8.         }
    9. 

  9.         .box {
    10. 

  10.             /* 1em = 当前或父级的font-size绑定 */
    11. 

  11.             height: 5em;
    12. 

  12.             background-color: green;
    13. 

  13.         }
    14. 

  14.         /* rem：永远和html中的font-size绑定 */
    15. 

  15.         html {
    16. 

  16.             font-size: 10px;
    17. 

  17.         }
    18. 

  18.         .box {
    19. 

  19.             width: 20rem;
    20. 

  20.             height: 15rem;
    21. 

  21.             background-color: grey;
    22. 

  22.         }
    23. 

  23.     </style>
    24. 

  24. </body>
    25.

上一篇： 流程控制、字面量与函数

下一篇： 关键词密度怎么做到合理化？

推荐阅读