ASCII码 ASCII码

伪类选择器和盒模型常见属性

发布于：2022-07-08 12:54:12  栏目：技术文档

伪类选择器

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

  • 结构伪类
    • :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>
  24. /* CSS文件 */
  25. /* 选择第一个 */
  26. li:nth-of-type(1) {
  27.     background-color: blue;
  28. }
  29. /* 选择最后一个 */
  30. li:nth-last-of-type(1) {
  31.     border: 5px solid violet;
  32. }
  33. /* 选择全部 */
  34. li:nth-of-type(n) {
  35.     background-color: blueviolet;
  36. }
  37. /* 选择奇数 */
  38. li:nth-of-type(2n+1) {
  39.     background-color: yellow;
  40. }
  41. /* 选择前三个 */
  42. li:nth-of-type(-n+3) {
  43.     background-color: cornflowerblue;
  44. }
  45. /* 选择最后三个 */
  46. li:nth-last-of-type(-n+3) {
  47.     background-color: aqua;
  48. }
  49. /* 选择偶数 */
  50. li:nth-of-type(even) {
  51.     color: brown;
  52. }
  53. /* 选择奇数 */
  54. li:nth-of-type(odd) {
  55.     border: 5px solid red;
  56. }

盒模型常见属性

盒模型常用属性有

  • 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>
  15. /* CSS代码 */
  16. .box {
  17.     height: 150px;
  18.     width: 200px;
  19.     background-clip: content-box;
  20.     border: 3px dashed yellowgreen;
  21.     box-sizing: border-box;
  22.     margin: 0px;
  23.     padding: 5px;
  24.     background-color: blueviolet;
  25.     color: burlywood;
  26. }

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行