（20）css3新增选择器

最新推荐文章于 2023-03-11 16:24:07 发布

泽哥ins

最新推荐文章于 2023-03-11 16:24:07 发布

阅读量716

点赞数 1

分类专栏： CSS3 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_36213140/article/details/121900461

版权

CSS3 专栏收录该内容

53 篇文章 5 订阅

订阅专栏

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

1.子级选择器

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

2.兄弟选择器

2.1相邻兄弟选择器

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

2.2其他兄弟选择器

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

3.结构伪类选择器

: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：

示例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

注意：浏览器对以上写法都能识别，双冒号是 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>

::before

::after

::first-letter

伪类选择器和伪元素选择器搭配使用

5.属性选择器

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

属性选择器示例1：

属性选择器示例2：

属性选择器示例3：

属性选择器示例4：

属性选择器示例5：

6.选择器权重（优先级）

基础选择器：id 选择器 > 类选择器 > 标签选择器 > *

伪类选择器、属性选择器的权重等于类选择器。

伪元素选择器的权重等于标签选择器。

泽哥ins

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
（20）css3新增选择器

CSS3中，相对于CSS2.1 版本的 7 个选择器，增加了更多其他的选择器，实现了更多的选择方式.1.子级选择器子级选择器用于选取带有特定父元素的元素。书写语法：element1 > element2 注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。 > 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。2.兄弟选择器...
复制链接

扫一扫