1.2-8CSS3新增选择器

最新推荐文章于 2023-12-24 14:35:32 发布

阿雾a

最新推荐文章于 2023-12-24 14:35:32 发布

阅读量66

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/weixin_58526727/article/details/117440775

版权

前端笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

CSS3 新增选择器

子级选择器

子级选择器用于选取带有特定父元素的元素。
书写语法：element1 > element2
注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。
> 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。

选择的是box中的两个直接子元素p，而inner中的p则不会被选中，因为inner中的p不是box的子元素，是孙子级的。

<style>
    .box>p {
        background-color: pink;
    }
</style>
<body>
    <div class="box">
        <p>这是box中的p元素</p>
        <p>这是box中的p元素</p>
        <div class="inner">
            <p>这是inner中的p标签</p>
        </div>
    </div>
    <p>这是单独的p标签</p>
</body>

兄弟选择器

选择器	简介
element1+element2	匹配同一个父元素中紧跟在element1后面的一个element2元素
element1~element2	匹配同一个父元素中在element1后面的所有element2元素

相邻兄弟选择器

相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
书写语法：E1 + E2。
注意：

选中的是紧跟在 E1 之后的同级元素 E2。
只能选中紧跟在后面的一个 E2 元素。
二者有相同的父元素。
+ 符号前后可以添加空格书写。

选择的是box1中h2后面紧挨着的那一个p标签（如果不是紧挨着将无法选中）

<style>
    .box1 h2 + p {
        background-color: red;
    }
</style>

<div class="box1">
    <h2>123</h2>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
</div>

此时选中的是后面的三个p标签：

<style>
    p + p {
        color: blue;
    }
</style>

<div class="box1">
    <h2>123</h2>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
</div>

其他兄弟选择器

其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
书写语法：element1~element2
注意：

选择 element1 之后出现的所有 element2。
两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
~ 符号前后可以添加空格书写。

选中的是box2中h2后面的所有同级p，无论是否紧挨着，都会被选中：

<style>
    .box2 h2~p {
        color: rgb(0, 243, 0);
    }
</style>

<div class="box2">
    <p>duanluo 0</p>
    <h2>123</h2>
    <h1>55</h1>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
</div>

结构伪类选择器

选择器	简介
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个

E:first-child

选择box1中第一个子元素h2：

.box1 h2:first-child {
        background-color: red;
    }

<div class="box1">
    <h2>123</h2>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
</div>

也可以写成.box1 :first-child {background-color: red;}这样写更不容易出错

E:last-child

写法同E:first-child相同

E:nth-child(n)

n可以是数字，关键字和公式
n如果是数字，就是选择第n个
even 表示选中偶数位置的子元素，odd 表示选中奇数位置的子元素
常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3… 一直递增）
但是第 0 元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 ……
n+5	从第5个开始（包含第5个）到最后，5 6 7 8 9 ……
-n+5	前5个（包含第5个），5 4 3 2 1 0……

例如
选择的是box1中的第三个子元素:

.box1 :nth-child(3) {
        background-color: rgb(52, 99, 92);
    }

选中的是box1中的全部奇数位置子元素：

.box1 :nth-child(odd) {
        background-color: rgb(52, 99, 92);
    }

选中的是box1中的既满足奇数位置又满足标签为p的子元素：

.box1 p:nth-child(odd) {
        background-color: rgb(52, 99, 92);
    }

E:first-of-type

选择的是box1里所有p中的第一个p（选中的是id为1的p）：

.box1 p:first-of-type {
        background-color:pink;
    }

<div class="box1">
    <h2>123</h2>
    <p id="1">这是box中的p元素</p>
    <h2>123</h2>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
    <p>这是box中的p元素</p>
</div>

E:last-of-type

和E:first-of-type选择规则相同，选中的是最后一个

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

E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。
.box1 p:nth-child(3)选中box1中的第三个且是p标签的子元素（如果不是第三个，或者是第三个不是p,都不会被选中）
E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素。
.box1 p:nth-of-type(3)选择box1里所有同级p标签中的第三个p（每个级别中的同级p都会被选中第三个）

伪元素选择器

新增伪元素

选择器	介绍
E::before	在 E 元素内部的前面插入一个元素
E::after	在 E 元素内部的后面插入一个元素
E::first-letter	选择到了 E 容器内的第一个字母
E::first-line	选择到了 E 容器内的第一行文本

h5 写法和传统写法区别

1.单冒号 E:before
2.双冒号 E::before
浏览器对以上写法都能识别，双冒号是 h5 的语法规范。

伪元素的注意事项

伪元素只能给双标签添加，不能给单标签添加
伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
伪元素里面必须写上属性 content:"";
before 和 after 能创建一个元素，但是属于行内元素。
因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。

属性选择器

属性选择器用来选择包含指定属性的标签。

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

选择器权重

基础选择器：id 选择器 > 类选择器 > 标签选择器 > *
伪类选择器、属性选择器的权重等于类选择器。
伪元素选择器的权重等于标签选择器。

阿雾a

关注

0
点赞
踩
0

收藏

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

CSS3 新增选择器子级选择器子级选择器用于选取带有特定父元素的元素。书写语法：element1 > element2注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。> 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。选择的是box中的两个直接子元素p，而inner中的p则不会被选中，因为inner中的p不是box的子元素，是孙子级的。<style> .box>p {
复制链接

扫一扫

专栏目录