博客列表 >举例伪类选择器与选择器权重的实例

举例伪类选择器与选择器权重的实例

P粉563197984
P粉563197984原创
2023年03月31日 19:43:46286浏览

伪类选择器

结构伪类

:nth-child():
:first-child():
:last-chaild():
:nth-last-chaild():

状态伪类

1.:hover:鼠标悬停
2.:enabled:有效控件
3.:disabled:禁用控件
4.:checked:选中控件
5.:required:必选控件
6.:focus:焦点控件

程序(结构伪类)

选中一一行背景变色

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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="zy.css"
  9. </head>
  10. <body>
  11. <ul class="list">
  12. <li class="item">item1</li>
  13. <li class="item">item2</li>
  14. <li class="item">item3</li>
  15. <li class="item">item4</li>
  16. <li class="item">item5</li>
  17. <li class="item">item6</li>
  18. <li class="item">item7</li>
  19. <li class="item">item8</li>
  20. <li class="item">item9</li>
  21. </ul>
  22. </html>

对应的css样式

  1. .list>.item:nth-child(1){background-color: brown;
  2. }

对应的效果

选中前三个

  1. .list>.item:nth-child(-n+3){
  2. background-color: brown;
  3. }


倒数第三个

  1. .list>.item:nth-last-child(3){
  2. background-color: brown;
  3. }

后五个

  1. .list>.item:nth-last-child(-n+5){
  2. background-color: brown;
  3. }

偶数列

  1. .list>.item:nth-child(2n){
  2. background-color: brown;
  3. }


奇数列

  1. background-color: brown;
  2. }

倍数列

  1. .list>.item:nth-child(3n){
  2. background-color: brown;
  3. }

程序(状态伪类)

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议