CSS|级别选择器

2024-01-19 04:01:57 阅读 0

CSS|级别选择器 1. 分类

层次选择器有四种类型：

我们先建立一个网页：

在正文中放置 5 段，并在第五段中放置无序列表：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器title>
head>
<body>
<p>p1p>
<p>p2p>
<p>p3p>
<p>p4p>
<p>
  水果：
  <ul>
  <li>西瓜li>
  <li>苹果li>
  <li>香蕉li>
ul>
p>
body>
html>

我们不难想到：

2. 后代选择器

从上面可以看出，所有标签都是body的后代。然后我们使用后代选择器来改变body的后代（所有标签）的样式：

后代选择器是使用祖先后跟一个空格后跟后代标签类型来声明的：

body p{
    background-color: aqua;
}

如上，body 的所有后代 p 标签都更改为水绿色：

3. 子选择器

可以通过将空格更改为 > 来将子选择器与后代选择器进行比较

body>p{
    background-color: aqua;
}

子项选择只会将 body 子项的 p 标签的背景更改为水绿色：

4. 相邻兄弟选择器

与后代选择器相比，将空格更改为+，将前面的标签更改为类：

.style1+p{
    background-color: aqua;
}

这是将引用此类的标签的下一个同级（同级）p标签的背景更改为浅绿色：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器title>
    <link rel="stylesheet" href="Style-demo06.css">
head>
<body>
<p>p1p>
<p class="style1">p2p>
<p>p3p>
<p>p4p>
<p>
  水果：
  <ul>
  <li><p>香蕉p>li>
  <li><p>苹果p>li>
  <li><p>香蕉p>li>
ul>
p>
body>
html>

如果 p2 被引用，那么 p3 应该改变颜色：

5.通用选择器

与相邻的同级选择器相比，将 + 更改为 ~：

.style1~p{
    background-color: aqua;
}

它的功能是将所有后续同级 p 标签（同一级别）的背景更改为水绿色：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器title>
    <link rel="stylesheet" href="Style-demo06.css">
head>
<body>
<p>p1p>
<p class="style1">p2p>
<p>p3p>
<p>p4p>
<p>
  水果：
  <ul>
  <li><p>香蕉p>li>
  <li><p>苹果p>li>
  <li><p>香蕉p>li>
ul>
p>
body>
html>