CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）

最新推荐文章于 2024-04-01 07:39:51 发布

芋泥丶

最新推荐文章于 2024-04-01 07:39:51 发布

阅读量1.2k

点赞数 5

文章标签： css3 动画 css

本文链接：https://blog.csdn.net/m0_53619602/article/details/125149677

版权

nth-child和nth-of-type的区别

3. 伪元素选择器

1.属性选择器

E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性且值以val开头的E元素
E[att$="val"]	匹配具有att属性且值以val结尾的E元素
E[att*="val“]	匹配具有att属性且值中含有val的E元素

注意：类选择器，属性选择器，伪类选择器权重都是10

例：

E[att]

  <style>
        input[type] {
            background-color: pink;
        }
    </style>

<body>
    <input type="text">
    <input>
</body>

效果图

E[att="val"]

  <style>
        input[type="email"] {
            background-color: pink;
        }
    </style>

<body>
    <input type="text">
    <input type="email">
</body>

效果图：

E[att^="val"]

    <style>
        input[ value^="text"] {
            background-color: pink;
        }
    </style>

<body>
    <input type="text" value="text-frist">
    <input type="text" value="text-last">
    <input type="text" value="email">
</body>

效果图：

E[att$="val"]

  <style>
        input[ value$="st"] {
            background-color: pink;
        }
    </style>

<body>
    <input type="text" value="text-frist">
    <input type="text" value="text-last">
    <input type="text" value="email">
</body>

效果图：

E[att*="val“]

 <style>
        input[ value*="xt"] {
            background-color: pink;
        }
    </style>

<body>
    <input type="text" value="text-frist">
    <input type="text" value="text-last">
    <input type="text" value="email">
</body>

效果图：

2. 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素

nth-child(n)

E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E

n可以是数字就是选择第几个子元素，从1开始
n可以是关键字：even 偶数 odd 奇数
n可以是公式如果n是公式，从0开始计算，但是第0个元素或者超出了元素个数会被忽略

2n 偶数
2n+1 奇数
5n 5 10 15 ...
n+5 从第五个开始（包含第五个）到最后
-n+5 前五个（包含第五个）

E:first-child

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        ul {
            list-style: none;
        }

        ul li {
            width: 150px;
            height: 30px;
            margin-top: 10px;
            background-color: pink;
        }

        ul li:first-child {
            background-color: plum;
        }

        ul li:nth-child(2) {
            background-color: aquamarine;
        }

        ul li:nth-child(3) {
            background-color: aquamarine;
        }

        ul li:last-child {
            background-color: bisque;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

</html>

效果图：

nth-of-type(n):

E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .box {
            margin-left: 20px;
        }

        .box p,
        .box div {
            width: 150px;
            height: 30px;
            background-color: pink;
        }

        .box p:first-of-type {
            background-color: antiquewhite;
        }

        .box p:last-of-type {
            background-color: aquamarine;
        }

        .box p:nth-of-type(4) {
            background-color: coral;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <div>4</div>
        <p>5</p>
        <p>6</p>
    </div>
</body>

</html>

效果图：

nth-child和nth-of-type的区别

nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E , 然后再根据E找第n个孩子

值得注意如果使用的是nth-child去寻找第四个元素，是寻找不到第四个p元素的

原因就是nth-child的序号是固定的，从第一个孩子顺序排列下来

nth-child找到第四个元素对应的不是p标签而是div标签，不匹配

  .box p:nth-child(4) {
            background-color: coral;
        }

<div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <div>4</div>
        <p>5</p>
        <p>6</p>
    </div>

效果图：

对应的nth-of-type而是按照元素类型开始排须的，先去找队员的元素类型，再去找对应的顺序，这样就可以找到对应的元素。

  .box p:nth-of-type(4) {
            background-color: coral;
        }

效果图：

3. 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

：：before 在元素前面插入内容

：：after 在元素后面插入内容

注意

before和after创建一个元素 ,但是属于行内元素
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
语法: element:before
before和after必须有content属性
before在父元素内容的前面创建元素, after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样,权重为1

例：

p: :before {
position: absolute ;
right: 20px;
top: 10px;
content: ' \e91le' ;
font -size: 20px;
}

案例：

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .box {
            width: 150px;
            height: 40px;
            margin-left: 20px;
            border: 1px solid pink;
        }

        .box::after {
            content: '>';
        }

        .box::before {
            content: '<';
        }
    </style>
</head>

<body>
    <div class="box">
        123456
    </div>
</body>

</html>

效果：

芋泥丶

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
6
评论
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）

结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素效果图E[att="val"] 效果图： E[att^="val"] 效果图： E[att$="val"] 效果图： E[att*="val“]效果图：结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 E:firs...
复制链接

扫一扫