Blogger Information
Blog 4
fans 0
comment 0
visits 2045
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择器权重及常用伪类
画骨
Original
325 people have browsed it

1 前端CSS选择器权重

  1. <div class="box" id="box">我是box</div>
  2. <style>
  3. div{
  4. background-color: red;
  5. /* width失效权重低于(0,1,1) */
  6. width:1000px
  7. }
  8. div.box {
  9. width:300px;height:300px;
  10. /* height失效,权重低于.(1,1,1) */
  11. }
  12. div#box.box{
  13. height:500px;
  14. /* 权重计算过程是 id=(1,0,0) class=(0,1.0) html标签=(0,0,1) 权重高覆盖权重低 */
  15. }
  16. </style>

效果图

2常用伪类选择器

  1. <ul>
  2. <li class="item">item1</li>
  3. <li class="item">item2</li>
  4. <li class="item">item3</li>
  5. <li class="item">item4</li>
  6. <li class="item">item5</li>
  7. <li class="item">item6</li>
  8. <li class="item">item7</li>
  9. <li class="item">item8</li>
  10. <li class="item">item9</li>
  11. <li class="item">item10</li>
  12. <li class="item">item11</li>
  13. </ul>
  14. <style>
  15. /* 第一种常用伪类 鼠标放上去效果 */
  16. li:hover{
  17. background-color: #333;
  18. }
  19. /* 第二种通常在列表中使用某一个或某一组。 :nth-of-type(an+b); */
  20. /* 01选中前三个 */
  21. ul li.item:nth-last-of-type(n+3){
  22. background-color: #555;
  23. }
  24. /* 匹配最后一个 */
  25. ul li.item:last-of-type{
  26. background-color: green;
  27. }
  28. /* 匹配一组 */
  29. ul li.item:nth-last-of-type(1n){
  30. background-color: #22ffcc;
  31. }
  32. /* 匹配偶数组 */
  33. ul li.item:nth-last-of-type(even){
  34. background-color: #22ffcc;
  35. }
  36. /* 匹配奇数组 */
  37. ul li.item:nth-last-of-type(odd){
  38. background-color: #22ffcc;
  39. }
  40. </style>
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