CSS3 新增选择器

LearnerZJ

于 2023-10-31 13:35:56 发布

阅读量39

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/2301_77751199/article/details/134132727

版权

HTML+CSS+JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1. 属性选择器

2. 结构伪类选择器

3. 伪元素选择器

属性选择器：

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

类选择器、属性选择器、伪类选择器，权重为 10

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元素

结构伪类选择器：

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

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个

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

n 可以是数字，关键字和公式

n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…

n 可以是关键字：even 偶数，odd 奇数

n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )，例如：

2n	偶数
2n+1	奇数
5n	5,10,15...
n+5	从5到最后(包含5)
-n+5	前5个(包含5)

结构伪类选择器一般用于选择父级里面的第几个孩子

nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E找第n个孩子

关于 nth-child（n）我们要知道 n 是从 0 开始计算的，要记住常用的公式

如果是无序列表，我们肯定用 nth-child 更多

类选择器、属性选择器、伪类选择器，权重为 10。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(even){
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
        <li>66</li>
    </ul>
</body>
</html>

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

nth-child会把父元素中的所有盒子都排列序号，例如section div:nth-child(1) 执行的时候先看 nth-child(1)，再回去看前面的div

nth-of-type会把父元素中的指定盒子排列序号，例如section div:nth-of-type(1)执行的时候先看div，再看nth-of-type(1)

伪元素选择器：

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

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

语法： element::before {}

before 和 after 创建一个元素，但是属于行内元素

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

before 和 after 必须有 content 属性

before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为 1

LearnerZJ

关注

0
点赞
踩
0

收藏

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

nth-child会把父元素中的所有盒子都排列序号，例如section div:nth-child(1) 执行的时候先看 nth-child(1)，再回去看前面的div。nth-of-type会把父元素中的指定盒子排列序号，例如section div:nth-of-type(1)执行的时候先看div，再看nth-of-type(1)before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。nth-child(n) 选择某个父元素的一个或多个特定的子元素（重点）
复制链接

扫一扫

专栏目录