ASCII码 ASCII码

css基础-选择器、权重、伪类选择器

发布于：2022-04-29 20:29:14  栏目：技术文档

css基础-选择器、权重、伪类选择器

1. 实例演示选择器权重,并写出详细计算过程

效果图

1.

2.

3.

html代码

  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.     <link rel="stylesheet" href="4.27作业1.css">
  8.     <title>实例演示选择器权重t</title>
  9. </head>
  10. <body>
  11.     <h1 class="x" id="xxx">hello word</h1>
  12.     <h2 class="y" id="yyy">hello word</h2>
  13.     <h3 class="t" id="ttt">test</h3>
  15. </body>
  16. </html>

导入的css代码

  1. /* 0个id 一个class 一个tag
  2. 权重0.1.1 */
  3. h1.x{
  4.     color: blue;
  5. }
  7. /* 0个id 0个class 一个tag
  8. 权重0.0.1 */
  10. h1{
  11.     color: red;
  12. }
  14. /* 0.1.1>0.0.1 所以显示蓝色 */
  17. /* 1个id 1个class 0个tag
  18. 权重1.1.0 */
  19. .y#yyy{
  20. color: blue;
  21. }
  24. /* 1个id 1个class 1个tag
  25. 权重1.1.1 */
  26. h2.y#yyy{
  27.     color: red;
  28. }
  29. /* 1.1.1>1.1.0 所以显示红色 */
  31. /* 1个id 1个class 1个tag
  32. 权重1.1.1 */
  33. h3.t#ttt{
  34.     color: red;
  35. }
  37. /* 0个id 0个class 1个tag
  38. 权重0.0.1 */
  39. h3{
  40.     color: blue !important
  41. }
  43. /* 1.1.1>0.0.1 
  44. 但是使用 !important  为最高指示 忽略任何权重
  45. 所以显示蓝色 */

2. 实例演示常用伪类选择器,并写出参数计算过程

2.1 演示选择子元素，选中后代元素，选中相邻兄弟，选中后面所有兄弟

效果图

子元素

后代元素

选中相邻兄弟元素

选中后面所有兄弟元素

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <style>
  8.         @import url(4.27作业2.css);
  9.     </style>
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>实例演示常用伪类选择器,并写出参数计算过程</title>
  12. </head>
  13. <body>
  15. <ul class="list">
  16.     <li class="test">test1</li>
  17.     <li class="test">test2
  18.         <ul class="item">
  19.             <li>text2-1</li>
  20.             <li>text2-2</li>
  21.             <li>text2-3</li>
  22.         </ul>
  23.     </li>
  24.     <li class="test1">test3</li>
  25.     <li class="test">test4</li>
  26.     <li class="test">test5</li>
  27.     <li class="test">test6</li>
  28. </ul>
  30. </body>
  31. </html>

导入的css代码

  1. /* 选中子元素  > */
  3. ul.list>li{
  4.     border: 1px solid
  5. }
  6. /* 选中后代元素 空格 */
  7. ul.list li{
  8.     border: 1px solid
  9. }
  11. /* 选中相邻兄弟  + */
  12. /* li.test1{
  13.     background-color: aquamarine;
  14. }
  15. li.test1+li.test{
  16.     background-color: aqua;
  17. } */
  19. /* 选中后面所有兄弟 ~ */
  20. li.test1~li.test{
  21.     background-color: aqua;
  22. }

3. 结构伪类的参数 以及计算过程

3.1 匹配第四个元素

3.2 选择一组所有元素

3.3 匹配第三个后面所有兄弟元素

3.4 匹配最后四个元素

3.5 选择偶数元素

html代码

  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.     <style>
  8.         @import url(4.27作业3.css);
  9.     </style>
  10.     <title>演示常用伪类选择器,并写出参数计算过程</title>
  11. </head>
  12. <body>
  13.     <ul class="test">
  14.         <li>item1</li>
  15.         <li>item2</li>
  16.         <li>item3</li>
  17.         <li>item4</li>
  18.         <li>item5</li>
  19.         <li>item6</li>
  20.     </ul>
  21. </body>
  22. </html>

导入的css代码

  1. /* :nth-of-type(an+b) */
  2. /* 匹配第4个元素 */
  3. /* ul.test>:nth-of-type(4){
  4.     background-color: aqua;
  5. } */
  7. /* 计算过程 a=0  n=[0.1.2.3....] b=4 */
  8. /* .test> :nth-of-type(0n + 4) {
  9.     background-color: lightgreen;
  10. } */
  12. /* 匹配一组 选择所有元素 a=1 */
  13. /* .test> :nth-of-type(n) {
  14.     background-color: lightgreen; */
  15. /* 计算过程  .test> :nth-of-type(1n) {
  16.     background-color: lightgreen;
  17. } */
  20. /* n = 0,1,2...
  22. 1*0 =0
  23. 1*1 = 1
  24. 1*2 = 2
  25. 1*3 = 3
  27. [1,2,3,....]  */
  29. /* 匹配第3个元素后面的所有兄弟元素 */
  30. /* .test> :nth-of-type(n + 3) {
  31.     background-color: lightgreen;
  32. } */
  33. /* 计算过程 a=1 n = 0,1,2,...
  34. 0+3=3
  35. 1+3=4
  36. 2+3=5
  37. ..... */
  39. /* 匹配最后四个元素 */
  40. /* .test>:nth-last-of-type(-n+4){
  41.     background-color: aquamarine;
  42. } */
  43. /* 计算过程 a=1 n=[1.2.3.4.....] b=4
  44. -1*1+4=4-1=3
  45. -2*1+4=4-2=2
  46. -3*1+4=4-3=1
  47. -4*1+4=4-4=0 */
  48. /* 选择偶数元素 even  */
  49. .test>:nth-of-type(even){
  50.     background-color: aquamarine;
  51. }
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行