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

博主信息

博文 6

粉丝 0

访问量 3678

专题推荐

更多>

伪类选择器

结构伪类

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

状态伪类

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

程序(结构伪类)

选中一一行背景变色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
    <link rel="stylesheet" href="zy.css"
</head>
<body>
    <ul class="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
    <li class="item">item8</li>
    <li class="item">item9</li>
   </ul>
</html>

对应的css样式

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

对应的效果

选中前三个

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

倒数第三个

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

后五个

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

偶数列

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

奇数列

    background-color: brown;
}

倍数列

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

程序(状态伪类)

批改老师：

PHPz

批改状态：合格

老师批语：总结的不错，没什么问题

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

要交作业了

2023-03-10 19:55:01