CSS3新增选择器之伪类选择器

最新推荐文章于 2024-04-18 21:42:13 发布

zyf_1998

最新推荐文章于 2024-04-18 21:42:13 发布

阅读量218

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/zyf_1998/article/details/105625195

版权

CSS3新增选择器

1.结构(位置)伪类选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .list div:nth-child(2){
            background-color:red;
        }
        .list div:nth-last-child(2){
            background-color: blue;
        }
        .list div:first-child{
            background-color:black;
        }
        .list div:last-child{
            background-color:green;
        }
        .box div:only-child{
            background-color:orange;
        }
       .list div:nth-of-type(3){
            background-color:yellow;
       }
       .box div:nth-last-of-type(2){
            background-color:pink;
       }
       .box div:first-of-type{
            background-color:purple;
       }
       .box div:last-of-type{
            background-color:cyan;
       }
       .content div:only-of-type{
            background-color:gray;
       }
    </style>
</head>
<body>
    <div class="list">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <div class="box">
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
    <div class="content">
        <div>9</div>
    </div>
</body>
</html>

在这里插入图片描述

目标伪类选择器

E:targe：URL后面跟锚点#，指向文档内某个具体的元素。也就是说，url后面的锚点，指向某个元素，那么该元素就会触发 target

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<d>, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
       div{
        width: 100px;
        height: 100px;
        background-color: #f00;
       }
    #box1:target{
        background-color: blue;
    }
    #box2:target{
        background-color: green;
    }
    </style>
<body>
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <div id="box1"></div>
    <br>
    <div id="box2"></div>
</body>
</html>>

效果图
在这里插入图片描述

zyf_1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增选择器之伪类选择器

CSS3新增选择器1.结构(位置)伪类选择器1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）3、E:first-child：匹配元素类型为E且是父元素的第一个子元素4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素5、E:only-...
复制链接

扫一扫