简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 选择器权重及详细计算过程、常用伪类选择器及参数计算过程
Blogger Information
Blog 38
fans 0
comment 0
visits 18545
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择器权重及详细计算过程、常用伪类选择器及参数计算过程
Blackeye
Original
613 people have browsed it

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

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！