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

css基础知识-伪类选择器

程序员文章站 2022-03-27 09:18:10
...

伪类选择器(非常重要)

分组结构伪类(重点学习) 使用说明 状态伪类 使用说明
选择任意 1 个 .list>li:nth-of-type(1){} 表单伪类 input:enabled 或 disabled enabled 是允许的,disabled 是禁用的
选择倒数第 4 个 .list>li:nth-last-of-type(4){} 单选伪类 input:checked + lable 选择选中后更改 lable 文本的状态
选择第一个 .list :first-of-type{} 按钮伪类: button:hove 当鼠标悬停时更改样式
选择最后一个 .list :last-of-type{} 获取焦点:input:focus 当光标放置文本框时改变样式

伪类使用演示

  1. <ul>
  2. <li>item1</li>
  3. <li>item2</li>
  4. <li>item3</li>
  5. <li>item4</li>
  6. <li>item5</li>
  7. <li>item6</li>
  8. <li>item7</li>
  9. <li>item8</li>
  10. <li>item9</li>
  11. <li>item10</li>
  12. <li>item11</li>
  13. <li>item12</li>
  14. </ul>
  15. <style>
  16. /* 选中第一个li元素并把颜色 */
  17. ul > li:frist-of-type {
  18. color: yellow;
  19. }
  20. /* 选中最后一个li元素 */
  21. ul > li:last-of-type {
  22. color: yellow;
  23. }
  24. /* 选中倒数第几个()中填要选中的参数,如倒数第5个就填5 */
  25. ul > li:nth-last-of-type(5) {
  26. color: yellow;
  27. }
  28. /* 选中任意一个或一组元素()中填入要选中的参数 */
  29. /* 1 a是系数从0开始(0 1 2 3 ...)
  30. 2 n是从0开始(0 1 2 3 ....)
  31. 3 b是偏移量,从0开始(0 1 2 3...)
  32. 注:三个值计算出来的索引必须是有效,从1开始
  33. */
  34. ul > li:nth-of-type(an + b) {
  35. color: yellow;
  36. }
  37. /* 取从第三个li开始的全部li元素 */
  38. ul > li:nth-of-type(n + 3) {
  39. color: red;
  40. /* n+3 匹配过程
  41. 其中3是偏移量从第3个开始
  42. 1 n=0;0+3=3 匹配第3个
  43. 2 n=1;1+3=4 匹配第4个
  44. 3 n=2;2+3=5 匹配第5个
  45. 4 n=3;3+3=6 匹配第6个
  46. 5 n=4;4+3=7 匹配第7个
  47. 6 n=5;5+3=8 匹配第8个
  48. 7 n=6;6+3=9 第9个,元素超界无法匹配
  49. 最后n+3匹配到的是3 4 5 6 7 8共6个
  50. */
  51. }
  52. /* a=-1时,功能与a=1是一样的,只是反向取 */
  53. /* 如要取前三个,就用-n+3的参数即可 */
  54. ul > li:nth-of-type(-n + 3) {
  55. color: red;
  56. /* -n+3匹配过程
  57. 1 -0+3=3 匹配第3个
  58. 2 -1+3=2 匹配第2个
  59. 3 -2+3=1 匹配第1个
  60. 4 -3+3=0 匹配不到
  61. 最后-n+3匹配到前三个li元素
  62. */
  63. }
  64. /* 如果要取后三个,就用nth-last-of-type(-n+b) */
  65. ul > li:nth-last-of-type(-n + 3) {
  66. color: red;
  67. /* nth-last-of-type是选择最后几个的意思
  68. 最后-n+3匹配过程
  69. 1 -0+3=3 匹配最后第3个
  70. 2 -1+3=2 匹配最后第2个
  71. 3 -2+3=1 匹配最后第1个
  72. 4 -3+3=0 匹配不到结束匹配
  73. -n+3=>(3 2 1 )
  74. */
  75. }
  76. /* 如果要取偶数的元素就用2n */
  77. ul > li:nth-of-type(2n) {
  78. color: red;
  79. /* 2n+2匹配过程
  80. 1 2*0=0 第0个无元素匹配不到
  81. 2 2*1=2 匹配到第2个
  82. 3 2*2=4 匹配到第4个
  83. 3 2*3=6 匹配到第6个
  84. 4 2*4=8 匹配到第8个
  85. 最后2n+2=>(2 4 6 8) 4个偶数元素
  86. 语法堂2n=even ,2n+1=odd
  87. nth-of-type(even)表示取偶数行
  88. */
  89. }
  90. /* 如果要取奇数元素就用2n+1 */
  91. ul > li:nth-of-type(2n + 1) {
  92. color: red;
  93. /* 2n+2匹配过程
  94. 1 2*0=0 0+1=1 匹配到第1个
  95. 2 2*1=2 2+1=3 匹配到第3个
  96. 3 2*2=4 4+1=5 匹配到第5个
  97. 3 2*3=6 6+1=7 匹配到第7个
  98. 4 2*4=8 8+1=9 匹配不到结束
  99. 最后2n+2=>(1 3 5 7) 4个偶数元素
  100. */
  101. }
  102. </style>

表单伪类

  1. <label for="username">用户名:</label>
  2. <input type="text" id="username" value="" placeholder="请输入用户名/邮箱" />
  3. <label for="password">密码:</label>
  4. <input type="password" id="password" value="" disabled />
  5. <label for="girl">性别:</label>
  6. <input type="radio" name="sex" id="man" value="1" />
  7. <label for="man"></label>
  8. <input type="radio" name="sex" id="girl" value="" checked />
  9. <label for="girl"></label>
  10. <div><button>提交</button></div>
  11. <style>
  12. /* 找到允许状态(enabled)的文本框并修改其背景色 */
  13. input:enabled {
  14. background-color: cornsilk;
  15. }
  16. /* 找到禁用状态(disabled)的文本框并修改背景色 */
  17. input:disabled {
  18. background-color: darkseagreen;
  19. }
  20. /* 当选中时将lable文本的样式改变 */
  21. input:checked + label {
  22. color: red;
  23. }
  24. /* 更改提交按钮的样式 */
  25. button {
  26. /* 边框线删除 */
  27. border: none;
  28. /* 轮廓线删除 */
  29. outline: none;
  30. width: 6rem;
  31. height: 1.8rem;
  32. background-color: lawngreen;
  33. color: rgb(255, 255, 255);
  34. margin: 1rem;
  35. }
  36. button:hover {
  37. background-color: tomato;
  38. /* 将鼠标变为小手 */
  39. cursor: pointer;
  40. }
  41. /* 获取焦点时更改背景色 */
  42. input:focus {
  43. background-color: violet;
  44. }
  45. </style>

引入字体图标的详细方法

  • 第一步打开阿里图标库网站(https://www.iconfont.cn/)
  • 第二步选中喜欢的图标加入购物车并下载到本地电脑上
  • 第三步解压图标拖到项目中
  • 第四步引入图标样式 css(<link rel="stylesheet" href="./font_icon/iconfont.css">
  • 第五步在标签中引入图标 class(class="iconfont icon-xxx")
  • 第六步可修改引入图标字体的样式,按文本方式设置图标即可

盒模型常用的 5 个属性

    1. width: 宽度
    1. height: 高度
    1. margin: 外边距
    1. padding: 内边距
    1. border: 边框
  1. <div class="box"></div>
  2. <style>
  3. /* 没加box-sizing: border-box;时盒子计算方式
  4. 高/宽度计算:20*16+border(10*2)+padding(5*2)=350px
  5. */
  6. .box {
  7. width: 20rem;
  8. height: 20rem;
  9. background-color: tomato;
  10. border: 10px dashed black;
  11. background-clip: content-box;
  12. padding: 5px;
  13. /* 加上box-sizing: border-box;后盒子的高度和宽度和设置的一样,不会影响到布局 */
  14. box-sizing: border-box;
  15. }
  16. </style>

加或不加 box-sizing:border-box 对比图

css基础知识-伪类选择器
css基础知识-伪类选择器

em 和 rem 的区别

    1. em 永远继承当前或者父级 font-size
    1. rem 永远继承的是 html 的 font-size
  1. <div class="box"></div>
  2. <style>
  3. .box {
  4. /* 当前或父级没有使用font-size时使用em计算结果不受影响 */
  5. /* 如果在当前或父级增加font-size设置的宽度和高度就会受影响 */
  6. width: 10em;
  7. height: 10em;
  8. /*
  9. 计算结果:html的默认font-size=16px*10em=160px,
  10. 当前设置宽和高都是160px
  11. */
  12. }
  13. .box {
  14. font-size: 30px;
  15. width: 10em;
  16. height: 10em;
  17. /* 计算结果:由于em继承了当前的font-size=30px*10em=300px */
  18. /* 所以当前设置的宽和高都是300px */
  19. }
  20. .box {
  21. font-size: 30px;
  22. width: 10rem;
  23. height: 10rem;
  24. /* 计算结果:由于rem永远继承的都是html的font-size
  25. 所以默认html的font-size=16px*10rem=160px
  26. 当前设置的宽和高都是160px
  27. */
  28. }
  29. </style>