search

博客列表 >选择器权重及详细计算过程、常用伪类选择器及参数计算过程

选择器权重及详细计算过程、常用伪类选择器及参数计算过程

Blackeye
Blackeye原创
2022年03月26日 14:11:05625浏览

part1

  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/select.css">
  9. </head>
  10. <body>
  11.     <h1 id="name" class="name">Dave</h1>
  12.     <h2 id="class" class="class">php</h2>
  13. </body>
  14. </html>

css

  1. /* !important 最高优先级 */
  2. /*  id:千分位
  3. class：百分位
  4. tag：个位 */
  6. /* id=1,class=1,tag=1
  7. 权重：(1,1,1) */
  8. h1#name.name{
  9.     color: blueviolet;
  10. }
  12. /* id=1,class=1,tag=0
  13. 权重：(1,1,0) */
  14. #name.name{
  15.     color: aqua;
  16. }
  18. /* id=1,class=1,tag=2
  19. 权重：(1,1,2) */
  20. body h1#name.name{
  21.     color:yellow;
  22. }
  24. /* !important无视权重 */
  25. h1{
  26.     color: black !important;
  27. }
  29. /* id=0,class=0,tag=1
  30. 权重：(0,0,1) */
  31. h2{
  32.     color: red;
  33. }
  35. /* id=0,class=1,tag=0
  36. 权重：(0,1,0) */
  37. .class{
  38.     color:green;
  39. }
  41. /* id=1,class=0,tag=0
  42. 权重：(1,0,0) */
  43. #class{
  44.     color: gold;
  45. }

part1_1
part1_2

part_2

  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/select-fake.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.         <li>item9</li>
  21.         <li>item10</li>
  22.         <li>item11</li>
  23.         <li>item12</li>
  24.         <li>item13</li>
  25.         <li>item14</li>
  26.         <li>item15</li>
  27.         <li>item16</li>
  28.         <li>item17</li>
  29.         <li>item18</li>
  30.         <li>item19</li>
  31.         <li>item20</li>
  32.     </ul>
  33. </body>
  34. </html>

css

  1. /* 第一个元素 */
  2. ul>li:first-of-type{
  3.     background-color: aqua;
  4. }
  5. /* 另一种选择第一个元素方式 */
  6. ul>li:nth-of-type(1){
  7.     background-color: red;
  8. }
  9. /* 上面1的全写 */
  10. ul>li:nth-of-type(0n+1){
  11.     background-color: green;
  12. }
  13. /* 最后一个元素 */
  14. ul>li:last-of-type{
  15.     background-color: aqua;
  16. }
  17. /* 另一种选择最后一个元素方式 */
  18. ul>li:nth-last-of-type(1){
  19.     background-color: red;
  20. }
  21. /* 上面1的全写 */
  22. ul>li:nth-last-of-type(0n+1){
  23.     background-color: green;
  24. }
  26. /* 当选择某个已知位置元素时,可以直接用偏移量来确定;
  27. 当需要选择组元素时,例如第2个以后的元素,a=1,n,b=2; */
  28. ul>li:nth-of-type(1n+2){
  29.     background-color: aquamarine;
  30. }
  32. /* 当需要选择特定间距元素的时候,a的值可以变更,例如选择偶数,a=2,n,b=0 */
  33. ul>li:nth-of-type(2n+0){
  34.     background-color: white;
  35. }
  37. /* 选择偶数另外一种方式 */
  38. ul>li:nth-of-type(even){
  39.     background-color: white;
  40. }

part2_1
part2_2

上一条：仿php中文网首页头部下一条：模态框初识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多