Css伪类选择器简单应用

2023年01月25日 11:27:18阅读数:359博客 / 远方 / 学习笔记

简介:文章主要介绍了css 上下文选择器、伪类选择器的应用。

css 上下文选择器

源码附图

附图1

源码示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>CSS选择器</title>
  8. <style>
  9. /* 上下文选择器-父子关系匹配 */
  10. .list>li{
  11. color:#ff9999;
  12. }
  13. /* css上下文选择器-后代关系匹配 */
  14. .list2 li{
  15. color:#8361ff;
  16. }
  17. /* css上下文选择器-兄弟关系匹配 */
  18. .list3 > .item.start + .item {
  19. color:#ff0000;
  20. background-color: #f9f9f9;
  21. }
  22. /* css上下文选择器-同级关系匹配 */
  23. .list5 > .item.startx ~ .item {
  24. color:#00ffb3;
  25. background-color: #f9f9f9;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <section data-name="shang-xia-wen-xuan-ze-qi">
  31. <hr>
  32. <h2>css上下文选择器-父子关系匹配 </h2>
  33. <ul class="list">
  34. <li>item1</li>
  35. <li>item2</li>
  36. <li>item3</li>
  37. <li>items</li>
  38. <li>item5</li>
  39. </ul>
  40. <hr>
  41. <hr>
  42. <h2>css上下文选择器-后代关系匹配 </h2>
  43. <ul class="list2">
  44. <li>item1</li>
  45. <li>item2</li>
  46. <li>item3</li>
  47. <li>items</li>
  48. <li>item5</li>
  49. </ul>
  50. <hr>
  51. <hr>
  52. <h2>css上下文选择器-兄弟关系匹配 </h2>
  53. <ul class="list3">
  54. <li class="item">item1</li>
  55. <li class="item">item2</li>
  56. <li class="item start">item3</li>
  57. <li class="item">items</li>
  58. <li class="item">item5</li>
  59. </ul>
  60. <hr>
  61. <hr>
  62. <h2>css上下文选择器-同级关系匹配 </h2>
  63. <ul class="list5">
  64. <li class="item">item1</li>
  65. <li class="item startx">item2</li>
  66. <li class="item">item3</li>
  67. <li class="item">items</li>
  68. <li class="item">item5</li>
  69. </ul>
  70. <hr>
  71. </section>
  72. </body>
  73. </html>

运行效果图

附图2

伪类选择器

源码附图

附图3

源码示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  9. /* 匹配第一个元素 */
  10. .list>:first-child{
  11. color:#ff0000;
  12. }
  13. /* 匹配最后一个元素 */
  14. .list>:last-child{
  15. color:#00ff62;
  16. }
  17. /* 匹配第三个元素 */
  18. .list>:nth-child(3){
  19. color:#081fee;
  20. }
  21. .list>.six{
  22. color:#df710b;
  23. }
  24. /* 匹配前三个元素 */
  25. .list2>:nth-child(-n+3){
  26. color:#ff0000;
  27. }
  28. /* 匹配从第6个起到最后的所有元素 */
  29. .list2>:nth-child(n+6){
  30. color:#11e481;
  31. }
  32. /* 匹配偶数位元素 */
  33. .list3>:nth-child(even){
  34. color:#670bdf;
  35. }
  36. /* 匹配奇数位元素 */
  37. .list3>:nth-child(odd){
  38. color:#ff0000;
  39. }
  40. /* 匹配最后三位元素 */
  41. .list5>:nth-last-child(-n+3){
  42. color:#670bdf;
  43. }
  44. /* 匹配倒数第5个元素 */
  45. .list5>:nth-last-child(5){
  46. color:#f11c00;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <h2>css伪类选择器</h2>
  52. <ul class="list">
  53. <li>item1 - :first-child</li>
  54. <li>item2</li>
  55. <li>item3 - :nth-child(3)</li>
  56. <li>item4</li>
  57. <li>item5</li>
  58. <li class="six">item6 .list>.six</li>
  59. <li>item7</li>
  60. <li>item8 - :last-child</li>
  61. </ul>
  62. <hr>
  63. <ul class="list2">
  64. <li>ltem1</li>
  65. <li>ltem2</li>
  66. <li>ltem3</li>
  67. <li>ltem4</li>
  68. <li>ltem5</li>
  69. <li>ltem6</li>
  70. <li>ltem7</li>
  71. <li>ltem8</li>
  72. <li>ltem9</li>
  73. <li>ltem10</li>
  74. </ul>
  75. <hr>
  76. <ul class="list3">
  77. <li>ltem1</li>
  78. <li>ltem2</li>
  79. <li>ltem3</li>
  80. <li>ltem4</li>
  81. <li>ltem5</li>
  82. <li>ltem6</li>
  83. <li>ltem7</li>
  84. <li>ltem8</li>
  85. </ul>
  86. <hr>
  87. <ul class="list5">
  88. <li>ltem1</li>
  89. <li>ltem2</li>
  90. <li>ltem3</li>
  91. <li>ltem4</li>
  92. <li>ltem5</li>
  93. </ul>
  94. </body>
  95. </html>

源码效果图

附图4

状态伪类选择器

源码附图

附图5

源码示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  9. fieldset{
  10. display: inline-grid;
  11. gap:1.5em;
  12. border-radis:10px;
  13. padding:5px 10px;
  14. background:linear-gradient(to left top,#b7aee9,#ffffff);
  15. border:none;
  16. }
  17. fieldset legend{
  18. color:#696969;
  19. text-align: center;
  20. }
  21. fieldset input{
  22. border:0;
  23. border-bottom: solid 1px #999;
  24. padding:6px;
  25. outline:none;
  26. background-color: transparent;
  27. }
  28. fieldset :disabled{
  29. background-color:#c9c6c3;
  30. opacity:0.8;
  31. }
  32. fieldset :focus{
  33. background: linear-gradient(to right bottom,#baf5c7,#f9f6f3);
  34. }
  35. input[type='checkbox']:checked+label{
  36. color:#ff0000;
  37. font-size:12px;
  38. }
  39. .btna{
  40. border:none;
  41. outline: none;
  42. padding:6px 12px;
  43. background-color: rgb(4, 69, 247);
  44. color:#ffffff;
  45. }
  46. .btna:hover{
  47. opacity:0.7;
  48. cursor:pointer;
  49. }
  50. .btna:focus{
  51. outline:none;
  52. background-color: rgb(4, 69, 247);
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <h2>状态伪类选择器</h2>
  58. <form action="#">
  59. <fieldset>
  60. <legend>- 用户登录 -</legend>
  61. <input type="text" name="user" id="user" autofocus placeholder="请输入用户名...">
  62. <input type="password" name="pwd" id="pwd" placeholder="请输入密码...">
  63. <input type="text" name="yzm" id="yzm" disabled placeholder="被禁用元素...">
  64. <div>
  65. <input type="checkbox" name="jzmm" id="jzmm" checked><label for="jzmm">记住密码</label>
  66. </div>
  67. <button type="button" class="btna">登录</button>
  68. </fieldset>
  69. </form>
  70. </body>
  71. </html>

运行效果

附图6

伪类实现简单菜单效果

源码附图

附图7

源码示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  9. .box {
  10. display: inline-grid;
  11. position: relative;
  12. border:0;
  13. }
  14. .box a{
  15. text-decoration: none;
  16. }
  17. .box a:hover{
  18. color:#ff0000;
  19. }
  20. .box a + ul{
  21. display:none;
  22. }
  23. .box a:hover + ul{
  24. display:block;
  25. }
  26. .erji{
  27. margin-top:0;
  28. padding:0;
  29. margin-left:0;
  30. background-color: aliceblue;
  31. }
  32. .box a + .erji:hover{
  33. display:block;
  34. }
  35. .box a + .erji>li:hover{
  36. color:#ff0000;
  37. cursor:pointer;
  38. }
  39. .box ul>li{
  40. list-style: none;
  41. line-height:35px;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div class="box">
  47. <a href="">前端学习</a>
  48. <ul class="erji">
  49. <li>html</li>
  50. <li>css</li>
  51. <li>js</li>
  52. </ul>
  53. </div>
  54. </body>
  55. <script>
  56. </script>
  57. </html>

运行效果

附图8

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    远方
    博文
    5
    粉丝
    0
    评论
    0
    访问量
    955
    积分:1
    P豆:70.5