投稿
  1. 极客之音首页
  2. 前端开发

CSS新增的属性、结构伪类选择器，帮你快速找到那个对的人

小半 • • 前端开发 • 阅读 256

导读：本篇文章讲解 CSS新增的属性、结构伪类选择器，帮你快速找到那个对的人，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

文章目录

前言

今天学会了这几个新的选择器会为我们节省很多代码，简化HTML结构，对于起名困难户也会有很大的帮助。

提示：以下是本篇文章正文内容，下面案例可供参考

一、属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器。

选择符及简介：
1、E[att]（选择具有att属性的E元素)
2、E[att=“val”]（选择具有att属性且属性值等于val的E元素)（重点掌握）
3、E[att^=“val”]（匹配具有att属性且值以val开头的E元素)
4、E[att$=“val”]（匹配具有att属性且值以val结尾的E元素)
5、E[att*=“val”]（匹配具有att属性且值中含有val的E元素)。

在这里插入图片描述

1、E[att]（选择具有att属性的E元素)

举个例子：相亲，已经确定女嘉宾使用value来选择，男嘉宾使用placeholder来选择，在此之前我们如果想要选择所有的女嘉宾，我们就只能给每个女嘉宾定义一个class类命，根据不同类命进行多次选择，但是现在我们可以通过属性选择器一次性选择所有女嘉宾了。

代码如下（示例）：

    <style>
        input[value] {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" value="古力娜扎">
    <input type="text" placeholder="宋小宝">
    <input type="text" value="迪丽热巴">
    <input type="text" placeholder="赵四">
</body>

效果如下（示例）：
在这里插入图片描述

2、E[att=“val”]（选择具有att属性且属性值等于val的E元素)（重点掌握）

举个例子：选择盒子礼物，一个已知礼物是古力娜扎，另一个不告诉你是什么。是我做选择，我肯定希望一下子就选中已知的古力娜扎嘛，万一另一个是蜘蛛蜈蚣咋办对吧。
代码如下（示例）：

    <style>
        input[type="text"] {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" value="古力娜扎">
    <input type="password" name="" id="">
</body>

效果如下（示例）：
在这里插入图片描述

3、E[att^=“val”]（匹配具有att属性且值以val开头的E元素)

举个例子：我喜欢御姐型的女人，这么多人里面每个人的特点都不一样，我想要快速的选择出来并且和所有的御姐都认识一下，这时候就可以用到这个方法。
代码如下（示例）：

    <style>
        div[class^=yujie] {
            color: red;
        }
    </style>
</head>

<body>
    <div class="wenrou">高圆圆</div>
    <div class="yujie1">杨幂</div>
    <div class="yujie2">娄艺潇</div>
    <div class="yujie3">倪妮</div>
    <div class="keai">小彩虹</div>
    <div class="gaoleng">宁静</div>
</body>

效果如下（示例）：
在这里插入图片描述

4、E[att$=“val”]（匹配具有att属性且值以val结尾的E元素)

代码如下（示例）：

    <style>
        section[class$=data] {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">那我是谁？</section>
</body>

效果如下（示例）：
在这里插入图片描述

二、结构伪类选择器

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

选择符及简介：
1、E ：first-child;(匹配父元素中的第一个子元素E)
2、E ：last-child;(匹配父元素中的最后一个子元素E)
3、E ：nth-child(n);(匹配父元素中的第n个子元素E)（n可以是数字，关键字和公式）（n可以是关键字：even偶数，odd奇数）(可以是公式，n从0开始计算：2n:偶数；2n+1：奇数；5n：5、10、15…;
n+5:从第五个开始到最后；-n+5：前5个包含第五个)；）
4、E ：first-of-type;(指定类型E的第一个)
5、E ：last-of-type;(指定类型E的最后一个)
6、E ：nth-of-type(n);(指定类型E的第n个)
在这里插入图片描述

下面又开始进入举例子的部分了：

1、E ：first-child;(匹配父元素中的第一个子元素E)
2、E ：last-child;(匹配父元素中的最后一个子元素E)

举例子：假设西游记成员要和复仇者联盟比赛拔河，现在进行选人环节，大家依次排成一排，开始选人了，我想要看孙悟空和绿巨人拔河，那么我们可以这样做。

代码如下（示例）：

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

<body>
    <ul>
        <li>孙悟空</li>
        <li>唐僧</li>
        <li>猪八戒</li>
        <li>沙僧</li>
    </ul>
    <ol>
        <li>黑寡妇</li>
        <li>美国队长</li>
        <li>蜘蛛侠</li>
        <li>金刚狼</li>
        <li>雷神</li>
        <li>绿巨人</li>
    </ol>
</body>

效果如下（示例）：
在这里插入图片描述

3、E ：nth-child(n);(匹配父元素中的第n个子元素E)（n可以是数字，关键字和公式）（n可以是关键字：even偶数，odd奇数）(可以是公式，n从0开始计算：2n:偶数；2n+1：奇数；5n：5、10、15…;

不举例子了，直接看代码看效果：

第一个代码如下（示例）：

    <style>
        ul li:nth-child(even) {
            background-color: rgb(223, 150, 116);
        }
        
        ul li:nth-child(odd) {
            background-color: rgb(91, 223, 223);
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

效果如下（示例）：
在这里插入图片描述
第二个代码如下（示例）：

    <style>
        ol li:nth-child(2n) {
            background-color: bisque;
        }
        
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

效果如下（示例）：
在这里插入图片描述
第三个代码如下（示例）：

    <style>
        ol li:nth-child(n+5) {
            background-color: rgb(157, 214, 236);
        }
    </style>
</head>

<body>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

效果如下（示例）：
在这里插入图片描述
第四个代码如下（示例）：

    <style>
        ol li:nth-child(-n+3) {
            background-color: rgb(130, 255, 207);
        }
    </style>
</head>

<body>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

效果如下（示例）：
在这里插入图片描述

4、E ：first-of-type;(指定类型E的第一个)
5、E ：last-of-type;(指定类型E的最后一个)
6、E ：nth-of-type(n);(指定类型E的第n个)

第一个代码如下（示例）：

    <style>
        ul li:first-of-type {
            background-color: aqua;
        }
        
        ul li:last-of-type {
            background-color: rgb(182, 255, 98);
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

效果如下（示例）：
在这里插入图片描述
第二个代码如下（示例）：

    <style>
        ul li:nth-of-type(even) {
            background-color: rgb(185, 255, 249);
        }
        
        ul li:nth-of-type(odd) {
            background-color: rgb(255, 202, 137);
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

效果如下（示例）：
在这里插入图片描述
第三个代码如下（示例）：

    <style>
        ul li:nth-child(6) {
            background-color: rgb(142, 142, 231);
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

效果如下（示例）：
在这里插入图片描述

总结

今天你学废了吗？
其实上面看了这么多代码，效果也差不多，感觉很重复很水对吧，其实不是的，面对这么多重复的代码效果，博主有在尽量一点不漏的展示所有代码的效果方便大家能更清晰的分清这些用法。下面重点来了：

区别：
1、nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配。（无序列表使用更多）
2、nth-of-type对元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6303.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！