（20）css3新增选择器

2023-09-18 阅读 21 评论 0

摘要：CSS3中，相对于CSS2.1 版本的 7 个选择器，增加了更多其他的选择器，实现了更多的选择方式. 1.子级选择器子级选择器用于选取带有特定父元素的元素。书写语法：element1 > element2 注意：如果 element2 元素不是父元素 element1 的直接子

CSS3中，相对于CSS2.1 版本的 7 个选择器，增加了更多其他的选择器，实现了更多的选择方式.

1.子级选择器

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

css后代选择器、

2.兄弟选择器

2.1相邻兄弟选择器

相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。书写语法：E1 + E2。注意： a）选中的是紧跟在 E1 之后的同级元素 E2。 b）只能选中紧跟在后面的一个 E2 元素。 c）二者有相同的父元素。 d）+ 符号前后可以添加空格书写。

2.2其他兄弟选择器

css 选择器？其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。书写语法：element1~element2 注意： a）选择 element1 之后出现的所有 element2。 b）两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。 c）~ 符号前后可以添加空格书写。

3.结构伪类选择器

css选择器有哪些， :first-child选择器一般情况会忽略前面的p标签，直接书写:first-child选择第一个h1标签，如果写了p，那是说明既要满足是第一个子元素，又要满足是p标签，有一个不满足就不会被选中，所以p标签1没有被选中。示例：

nth-child（n）

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

示例1：

示例2：

css高级选择器，

示例3：

示例4：

示例5：

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

E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。

E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素。我们把相同类型的标签分成一个小组，再小组中进行选择。

4.伪元素选择器

伪类选择器有哪些，伪元素：在DOM里新生成了一个元素，选中的是这个新元素，类似于标签选择器的效果，在DOM中无法选中这个新元素，所以叫做伪元素。伪元素的权重与标签选择器一样。

4.1h5 写法和传统写法区别

1. 单冒号 E:before

2. 双冒号 E::before

css3新增样式选择器？注意：浏览器对以上写法都能识别，双冒号是 h5 的语法规范。

伪类就一个冒号，CSS3之前伪元素也是一个冒号，CSS3规定伪元素使用2个冒号，为了和伪类进行区分，功能上没有区别，但是两个冒号存在兼容问题，再低版本的IE浏览器它是不识别双冒号的，所以当我们考虑低版本IE浏览器的时候书写单冒号，当我们不考虑低版本IE浏览器的时候书写双冒号更加好一些。

4.2伪元素的注意事项

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

4.3伪元素选择器示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css3伪元素选择器</title><style>.box ul::after {display: block;content: "1";width: 50px;height: 50px;background-color: #ffc0cb;}.box ul {list-style: none;width: 600px;height: 600px;background-color: #0f0;}.box ul li {width: 100px;height: 100px;margin-top: 5px;background-color: #f00;}</style>
</head>
<body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>