CSS进阶选择器——属性选择器、结构伪类选择器、伪元素选择器

最新推荐文章于 2024-04-16 16:18:11 发布

X-77

最新推荐文章于 2024-04-16 16:18:11 发布

阅读量416

点赞数 4

分类专栏： CSS专栏文章标签： css

本文链接：https://blog.csdn.net/weixin_45990864/article/details/119301584

版权

CSS专栏专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在前面的文章中讲解了CSS中的基础选择器，本篇来讲解一些新的选择器，让开发更加简洁方便。

一、属性选择器

属性选择器通过已经存在的属性名或属性值匹配元素。

选择符	简介
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元素

各选择符用法如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3属性选择器</title>
    <style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>
</head>
<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>这只是一个盒子</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">图标1</section>
    <section class="icon2-data">图标2</section>
    <section class="icon3-ico">图标3</section>

</body>
</html>

效果图如下：

属性选择器的权重是0,0,1,0

二、结构伪类选择器

结构伪类选择器，是针对HTML层次“结构”的伪类选择器。使用结构伪类选择器可以动态的选择HTML中的元素，简化代码。

选择器	功能描述
E:first-child	选取父元素中的第一个孩子E
E:last-child	选取父元素中的最后一个孩子E
E:nth-child(n)	选择父元素的第n个子元素，n从1开始计算
first-of-type	选择父元素下同种标签的第一个元素
last-of-type	选择父元素下同种标签的倒数第一个元素
nth-of-type(n)	与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素

注： n的值可以是数字、公式或者关键字。

数字：当n的取值为数字时，取值范围为1~n。

关键字：even（偶数）/odd(奇数)

公式：当n的取值是公式是，n从0开始取值。

2n偶数
2n+1奇数
5n 5 10 15…
n+5 从第五个开始
-n+5 前五个包含5

nth-child(n)和nth-of-type(n)的区别：

<div class="wrap">
    <div>第一个子元素</div>
    <span>第二个子元素</span>
    <div>第三个子元素</div>
</div>

nth-child(n)是先将选出的盒子中的所有孩子排序，先选出想要的孩子，再看孩子的标签是否匹配。

<style>
	.wrap div:nth-child(2) {
		color: red;
	}
</style>

例如此处就是先将wrap中所有的孩子进行排序，再将第二个孩子span选出来，对比发现和div不同，所以匹配失败。

nth-of-type(n)是将盒子中指定标签的孩子进行排序，再选出指定的孩子。

<style>
	.wrap div:nth-of-type(2) {
		color: blue;
		}
</style>

例如此处就是先将wrap中标签为div的孩子进行排序，再将div的第二个孩子选出来修改样式。

结构伪类选择器的权重是0,0,1,0

三、伪元素选择器

伪元素：利用css创建新标签元素，不需要创建html标签，也不能在文档树中查找到该标签，可以简化html结构。

这里主要讲解before伪元素和after伪元素。

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

语法：element::before{

content：

}

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>伪元素选择器before和after</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            content: '我是before伪元素';
            font-size: 20px;
            color: blue;
        }
        div::after {
            content: '我是after伪元素';
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <div>
        这是html中的盒子div
    </div>
</body>
</html>

效果图：

注意：
before和after 创建一个元素，属于行内元素