CSS3之新增选择器

格子学前端

已于 2022-03-19 08:50:15 修改

阅读量719

点赞数 20

分类专栏：前端 html css 文章标签： css css3 前端 html html5

于 2022-03-19 08:41:45 首次发布

本文链接：https://blog.csdn.net/m0_61794291/article/details/123204850

版权

前端同时被 3 个专栏收录

43 篇文章 5 订阅

订阅专栏

html

31 篇文章 1 订阅

订阅专栏

css

17 篇文章 1 订阅

订阅专栏

文章目录

1.属性选择器
- - - - 1.利用属性选择器就可以不借助于类或者id选择器
        2.属性选择器还可以选择属性 = 值的某些元素
        3.属性选择器可以选择属性值开头的某些元素
        4.属性选择器可以选择属性值结尾的某些元素
2.结构伪类选择器
3.伪元素选择器
4.总结

1.属性选择器

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

选择符	简介
ele[a]	选择具有a属性的ele元素
ele[a=“val”]	选择具有a属性且属性值且等于val的ele元素
ele[a^=“val”]	选择具有a属性且值以val开头的ele元素
ele[a$=“val”]	选择具有a属性且值以val结尾的ele元素
ele[a*=“val”]	选择具有a属性且值中含有val的ele元素

tips：上面表格中的ele可以代表任何元素，a可以代表任何属性

注意点：

1.利用属性选择器就可以不借助于类或者id选择器

<head>
    <style>
        input[value] {
            color: lightblue;
        }
    </style>
</head>
<body>
    <input type="text" value="请输入内容">
</body>

2.属性选择器还可以选择属性 = 值的某些元素

<head>
<style>
    input[value="请输入内容"] {
        color: lightblue;
    }
</style>
</head>
<body>
    <input type="text" value="请输入内容">
</body>

3.属性选择器可以选择属性值开头的某些元素

<head>
<style>
    input[value^="请输入"] {
        color: lightblue;
    }
</style>
</head>
<body>
    <input type="text" value="请输入内容">
</body>

4.属性选择器可以选择属性值结尾的某些元素

<head>
<style>
    input[value$="内容"] {
        color: lightblue;
    }
</style>
</head>
<body>
    <input type="text" value="请输入内容">
</body>

最后这四种选择方式的效果都是一样的，如图~
在这里插入图片描述

2.结构伪类选择器

结构伪类选择器常用于根据父级选择器选择里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type（n）	指定类型E的第n个

2.1 `E:first-child` 和`E:last-child`

<head>
    <style>
        ul li:first-child {
            background-color: lightblue;
        }

        ul li:last-child {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

在这里插入图片描述

2.2 `nth-child(n)`

nth-child(n)选择某个父级元素的一个或多个特定的子元素

注意点：
1. n可以是数字，关键字和公式
2.n如果是数字，就是选择第n个子元素，里面数字从1开始
3.n可以是关键字：even 偶数，odd奇数
4.n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

<head>
    <style>
        ul li:nth-child(even) {
        /* 选中所有偶数序号的元素 */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

在这里插入图片描述

2.3`E:first-of-type`和`E:last-of-type`

类型	作用
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个

3.伪元素选择器

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

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
        div::before {
            content: "我是伪元素选择器";
        }
    </style>
</head>

在这里插入图片描述

注意点：

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

4.总结

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配素进行排序选择，先去匹配E，然后再根据E找第n个孩子
关于nth-child(n)，我们要知道n是从0开始计算的，要记住常用的公式
如果是无序列表，我们肯定用 nth-child 更多
类选择器，属性选择器，伪类选择器，权重为10

格子学前端

关注

20
点赞
踩
14

收藏

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

文章目录1.属性选择器1.利用属性选择器就可以不借助于类或者id选择器2.属性选择器还可以选择属性 = 值的某些元素3.属性选择器可以选择属性值开头的某些元素4.属性选择器可以选择属性值结尾的某些元素2.结构伪类选择器2.1 `E:first-child` 和`E:last-child`2.2 `nth-child(n)`2.3`E:first-of-type`和`E:last-of-type`3.伪元素选择器1.属性选择器属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者i
复制链接

扫一扫