ASCII码 ASCII码

权重与伪类选择器

发布于：2022-04-19 16:30:15  栏目：技术文档

权重

  1. /* 千：id 
  2. 百：class
  3. 个：tag */
  4. /* 调试模式 提权到最高*/
  5. p{
  6.     color:orange !important;
  7. }
  8. /* 单个id 1，0，0 */
  9. #helloid{
  10.     color: seagreen;
  11. }
  12. /* class+标签 0，1，2*/
  13. body p.hello{
  14.     color: salmon;
  15. }
  16. /* 单个class 0，1，0 */
  17. .hello{
  18.     color: blueviolet;
  19. }
  20. /* 多个标签 0，0，2*/
  21. body p{
  22.     color: red;
  23. }
  24. /* 单个标签 0，0，1*/
  25. p{
  26.     color: blue;
  27. }

伪类选择器

  1. /* 第一个 */
  2. .list>:first-of-type {
  3.     background-color: green;
  4. }
  5. /* 最后一个 */
  6. .list>li:last-of-type {
  7.     background-color: sienna;
  8. }
  9. /* 第n个 */
  10. .list>:nth-of-type(6){
  11.     background-color: rgb(10, 43, 72);
  12. }
  13. /* 倒数第n个 */
  14. .list>li:nth-last-of-type(4) {
  15.     background-color: violet;
  16. }

结构伪类的参数

格式：:nth-of-type(an+b)

  1. a: 系数, [0,1,2,…]
  2. n: [0,1,2,3,….]
  3. b: 偏移量, 从0开始注: 计算出来的索引,必须是有效, 从1开始

    匹配单个：a=0

    1. .list> :nth-of-type(0n + 3) {
    2.  background-color: lightgreen;
    3. }

    匹配一组：a=1

    1. .list> :nth-of-type(n + 3) {
    2.  background-color: lightgreen;
    3. }
    4. /* 取前3个 */
    5. .list> :nth-of-type(-n + 3) {
    6.  background-color: lightgreen;
    7. }
    8. /* 取最后3个 */
    9. .list> :nth-last-of-type(-n + 3) {
    10.  background-color: lightgreen;
    11. }
    12. /*奇数*/
    13. .list> :nth-of-type(2n - 1) {
    14.  background-color: lightgreen;
    15. } 
    16. /*奇数语法糖*/
    17. .list> :nth-of-type(odd) {
    18.  background-color: lightgreen;
    19. }
    20. /*偶数*/
    21. .list> :nth-of-type(2n) {
    22.  background-color: lightgreen;
    23. } 
    24. /*偶数语法糖*/
    25. .list> :nth-of-type(even) {
    26.  background-color: lightgreen;
    27. }
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行