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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
伪类选择器结构伪类

: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. }

程序(状态伪类)【本文来源：韩国服务器 https://www.68idc.cn欢迎留下您的宝贵建议】
更多阅读