详解CSS层级选择器

小蓝 • 2024-11-21 01:14 • 编程

层级选择器（也称上下文选择器）是指在CSS中通过选择其子元素或后代元素来选择某个元素。层级选择器有两个基本形式：

CSS中除了后代选择器和子选择器之外，还有邻接选择器、通用兄弟选择器、属性选择器等。

邻接选择器：使用加号（“+”）分隔元素，表示选择紧接着前一个元素的下一个元素，如“h1 + p”表示选择紧接着h1元素后的第一个p元素。
通用兄弟选择器：使用波浪号（“~”）分隔元素，表示选择前面某个元素后面符合条件的所有兄弟元素，如“h1 ~ p”表示选择所有与h1元素在同一级别下的所有p元素。
属性选择器：用于按照属性选择元素，常见的属性选择器有属性选择器（如[type=“text”]）、子串匹配选择器（如[class*=”nav”]，表示含有“nav”关键词的所有class属性）、前缀匹配选择器（如[class^=”nav-”]，表示class属性以“nav-”开头的所有元素）等。

在CSS中也有层次选择器，但不同于层级选择器，层次选择器是指选择元素在文档树中的位置关系，常见的层次选择器有父元素选择器和子元素选择器。

父元素选择器：使用选择符“E：nth-child（n）”，其中n为数字，表示选择元素的第n个父元素，如“li:nth-child(2)”表示选择所有li元素的第二个父元素。
子元素选择器：使用选择符“E：nth-of-type(n)”，其中n为数字，表示选择元素的第n个类型相同的子元素，如“ul:nth-of-type(2)”表示选取文档中的第二个ul元素。

层级选择器的写法非常简单，只需在选择器中使用空格或大于号分隔元素即可，例如：

/* 后代选择器 */
div p {
  color: red;
}

/* 子选择器 */
ul > li {
  color: blue;
}

层级选择器可以应用于各种场景，例如：

层级选择器具有以下几个特点：

子选择器的写法非常简单，只需在选择器中使用大于号分隔元素即可，例如：

/* 子选择器 */
ul > li {
  color: blue;
}

层级选择器可以和超链接一起使用，只需将超链接加入到层级选择器的元素中即可，例如：

/* 后代选择器 */
nav a {
  color: red;
}

/* 子选择器 */
ul > li > a {
  color: blue;
}

伪类选择器也可以和层级选择器一起使用，如：

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/160555.html