伪类选择器（:link :visited :hover :avtive Xnth-child(n) X: first-child X: last-child X:nth-of-type(n)...）

最新推荐文章于 2024-07-03 09:38:36 发布

远方有只兔子~

最新推荐文章于 2024-07-03 09:38:36 发布

阅读量319

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/qq_43812504/article/details/110817212

版权

这篇博客详细介绍了CSS中的伪类选择器，包括, , , 的顺序要求及其用法。同时，还探讨了结构性伪类选择器，如:nth-child(n), :first-child, :last-child, :nth-of-type(n)等，解释了它们如何匹配元素并提供了实例解析。" 121911140,9885266,理解Web越权漏洞：平行与垂直越权,"['web安全', '安全漏洞', 'PHP']

摘要由CSDN通过智能技术生成

1. :link :visited :hover :avtive

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

顺序要求：

- 在CSS定义中，a:hover要放在a:link和a:visited之后才有效；

- a:active要放在a:hover后面才有效，需要严格按顺序才能看到效果

2.结构性伪类选择器：

X:nth-child(n)：选择所有 p 元素的父元素的第n个子元素

  "n"可以是数字1、2、3、4...，也可以是表达式2n、2n+1、-n+3等，还可以是关键词odd/even。
  p:nth-child(n){background:green}  表示p父元素中的第n个元素（且为p）
  p:nth-child(odd){background:red}/*匹配奇数行*/
  p:nth-child(even){background:red}/*匹配偶数行*/
  p:nth-child(2n){background:red}/*选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
    
            border: 1px solid orange;
            height: 15px;
            width: 100px;
            font-size: 12px;
        }
        p:nth-child(1){
    
            background: green;
        }
    </style>
</head>
<body>
    <div>
        <p>p1</p>
        <p>p2</p

最低0.47元/天解锁文章

远方有只兔子~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
伪类选择器（:link :visited :hover :avtive Xnth-child(n) X: first-child X: last-child X:nth-of-type(n)...）

1. :link :visited :hover :avtivea:link {color:#FF0000;} /* 未访问的链接 */a:visited {color:#00FF00;} /* 已访问的链接 */a:hover {color:#FF00FF;} /* 鼠标划过链接 */a:active {color:#0000FF;} /* 已选中的链接 */顺序要求：- 在CSS定义中，a:hover要放在a:link和a:visited之后才有效；- a:active要放在a:hove
复制链接

扫一扫

专栏目录