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 选择器 > 类选择器 > 标签选择器 > *
- 伪类选择器、属性选择器的权重等于类选择器 。
- 伪元素选择器的权重等于标签选择器。