CSS 高级（复合）选择器

TIP

在前面的课程中，我们学习了 CSS 基础选择器：标签选择器、class 选择器、id 选择器、* 通配符选择器

并且还讲到基础选择器之间的优先级，基础选择器优先级从高到低顺序如下

行内样式 > id 选择器 > class 选择器 > 标签选择器 > * 通配符选择器

本节课我们接着学习其它的复合选择器，复合选择器都是多个选择器组合而成的。

详细查阅，CSS 高级选择器官方文档

一、交集与并集选择器¶

选择器名称	示例	描述
交集选择器	li.para	选择既是 li 标签，也属于 para 类的标签
并集选择器	ul,ol	选择所有 ul 和 ol 标签

1、交集选择器¶

TIP

任意不同选择器组合在一起，选择器之间紧挨着，中间没有空格。

语法：

选择器1.选择器2 { }
选择器1.选择器2.选择器3 { }

h3.title {
} /* 选择h3标签中class名为title的元素 */
.box.box1 {
} /* 选择 class中包含"box box1" 的 标签元素 如 class="box box1" */

案例

<style type="text/css">
  /*选择h3标签中class名为title的元素，将背景颜色为黄色*/
  h3.title {
    background-color: yellow;
  }
  /* 选择 class中包含"box box1" 的 元素 */
  .box.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
<body>
  <h3>无任可样式</h3>
  <h3 class="title">h3.title</h3>
  <div class="box box1"></div>
</body>

渲染效果： ![[Pasted image 20260226161655.png]]

2、并集（分组）选择器¶

TIP

多个选择器之间用，逗号隔开

当几个选择器的操作样式是一样时，我们可以选择用群组选择器来操作，这样可以节省代码。

语法

选择器1,
选择器2,
选择器3 {
}

/* 选择 body ul p h3 标签 */
body,
ul,
p,
h3 {
}
/* 
选择
class='box1' 的元素
class='title' 的 h3 元素
class='box' 里面的 class="box2" 里面的 p元素
*/
.box1,
h3.title,
.box .box2 p {
}

案例

<style>
  /* 复杂写法
  .box{color:red;}
  h3 span{color:red;}
  p span.title{color:red;}
  */
  /*此写法为以上写法的简写形式-分组选择器*/
  .box,
  h3 span,
  p span.title {
    color: red;
  }
</style>
<body>
  <div class="box">box中内容</div>
  <h3><span>h3中的span</span></h3>
  <p><span class="title">p标签</span></p>
</body>

渲染效果： ![[Pasted image 20260226161821.png]]

3、样式初始化¶

**TIP

在实际开发中，我们会把 html 标签默认的样式清除掉，因为不同的浏览器 html 标签的默认样式会有少许差异。

在清除默认样式（样式初始化）时，用到的就是分组选择器。

body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
}

你可能会问

默认样式没用，为什么浏览器还要给他加默认样式呢？是因为要表现 html 标签本身的结构特性，或语义化。

二、关系选择器¶

选择器	举例
后代选择器	div p span{ }
子代选择器	div > span { }
相邻兄弟选择器	.box + p{ }
后续兄弟选择器	.box ~ p{ }

1、后代选择器¶

TIP

用 " " (空格) 组合选择器，选择前一个元素的后代节点，空格在这里表示后代。
后代并不一定是 "儿子"，只要是当前元素里面的元素，都算当前元素的后代。

语法

选择器1 选择器2 {
}
选择器1 选择器2 选择器3 {
}

/* 选中位于任意 div 元素之内的 p 元素 */
div p {
}
/* 选中位于任意 div 元素之内的 p 元素之内的 span 元素 */
div p span {
}

案例

<style>
  /* 选中位于任意 div 元素之内的 p 元素 */
  div p {
    color: red;
  }
  /* 选中位于任意 div 元素之内的 p 元素之内的 span 元素 */
  div p span {
    color: blue;
  }
</style>
<div>
  <p>
    p 标签
    <span>span标签 </span>
  </p>
</div>

渲染效果： ![[Pasted image 20260226162011.png]]

**案例

<style>
  /* 选择 class="box" 的元素之内的 span 元素 */
  .box span {
    color: red;
  }
</style>

<div class="box">
  <p>
    <span>span标签 </span>
  </p>
  <span>span标签 </span>
</div>

![[Pasted image 20260226162125.png]]

2、子代选择器¶

TIP

子元素选择器之间用 > 连接
选中元素的直接后代（直接儿子）元素

语法：

选择器1 > 选择器2 {
}

/* 选择 div 标签里面子元素是 span 的标签 */
div > span {
}
.box > p {
}

案例

<style>
  .box > p {
    color: red;
  }
</style>
<body>
  <div class="box">
    <p>box p</p>
    <div class="item">
      <p>box item p</p>
    </div>
    <p>box p</p>
  </div>
</body>

渲染效果： ![[Pasted image 20260226162200.png]]

3、相邻兄弟选择器¶

TIP

- 号组合两个选择器，当第二个元素紧跟在第一个元素之后，并且两个元素都属于同一个父元素的子元素，则第二个元素将被选中
a + b 即选择紧跟在 a 后面的第一个兄弟 b，a b 共属同一个父节点

语法：

选择器1 + 选择器2 {
}

/* 选中 h3 标签后紧跟的第一个兄弟 p 元素 */
h3 + p {
}

案例：

<style>
  /* 选中 h3 标签后紧跟的第一个兄弟 p 元素 */
  h3 + p {
    color: red;
  }
</style>
<body>
  <h3>h3标签</h3>
  <p>第一个p</p>
  <p>第二个p</p>
</body>

渲染效果： ![[Pasted image 20260226162302.png]]

**案例

<style>
  h3 + p {
    color: red;
  }
</style>
<body>
  <h3>h3标签</h3>
  <span></span>
  <p>第一个p，但不是紧跟在h3后面，所以没有选中</p>
</body>

渲染效果：

![[Pasted image 20260226162405.png]]

4、后续兄弟选择器¶

TIP

后续兄弟选择器，位置无须紧邻，只须同层级
div~p 选择 div 元素之后所有同层级 p 元素。

语法

选择器1 ~ 选择器2 {
}

div ~ p {
} /* 选择 div 标签 之后的所有兄弟 p 元素 */

案例

<style>
  /* 选择 h3 标签 之后的所有兄弟 p 元素 */
  h3 ~ p {
    color: red;
  }
</style>
<body>
  <h3>h3</h3>
  <p>第一个p</p>
  <div class="box">
    <p>box中p</p>
  </div>
  <p>第二个p</p>
</body>

渲染效果： ![[Pasted image 20260226162451.png]]

三、伪类选择器¶

TIP

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态

1、a 伪类选择器¶

TIP

超链接有四个特殊状态，分别对应不同的伪类选择器

伪类	描述
a:link	没有被访问的超级链接
a:visited	已经被访问过的超级链接
a:hover	正被鼠标悬停的超级链接
a:active	正被激活的超级链接（按下按键，但还没有松开按键）

爱恨准则

a 标签的伪类书写，按照 “爱恨准则” 的顺序，否则会与伪类不生效。

按照 LOVE HATE (LVHA) 的顺序声明 :link - :visited - :hover - :active

<style>
  /*
  顺序不能乱 ， 爱恨准则 LOVE HATE
  :link  -> :visited -> :hover -> :active
  */
  a:link {
    color: red;
  }
  a:visited {
    color: blue;
  }
  a:hover {
    color: green;
  }
  a:active {
    color: yellow;
  }
</style>
<body>
  <p><a href="https://www.icodingedu.com">艾编程</a></p>
  <p><a href="https://baidu.com">百度一下，你就知道 ！</a></p>
</body>

注意事项：

遵守了 “爱恨原则” ，但 a:link 不生效，是因为之前访问过的网址会被浏览器记录，就会显示 a:visited 的样式（修改网址或清楚浏览记录即可）
四个样式可以根据实际情况单独使用
伪类 :hover 不仅可以用在 a 标签上，还可以用在其他标签上，比如：div、p、列表标签，标题标签等等

:hover 在其它标签上的应用

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  /*鼠标滑动到div，背景变为skyblue*/
  div:hover {
    background: skyblue;
  }
  /*鼠标滑动到div上时，div里面的p标签隐藏*/
  div:hover p {
    display: none; /*隐藏p标签*/
  }
</style>
<body>
  <div>
    <p>p标签内容</p>
  </div>
</body>

渲染效果： ![[Pasted image 20260226162622.png]]

应用场景

常用来实现鼠标移入动画，往后我们会大量使用他。

2、:focus 获取焦点¶

TIP

:focus 表示获得焦点的元素（如表单输入）。
当用户点击或触摸元素或通过键盘的 "tab" 键选择它时会被触发

<style>
  /*输入框获取焦点后，文字变红，背景颜色变黄色*/
  input.user:focus {
    color: red;
    background-color: yellow;
  }
</style>
<body>
  <input type="text" class="user" value="获取焦点，我变成红字黄底" />
</body>

渲染效果： ![[Pasted image 20260226162729.png]]

3、:checked 被选中¶

TIP

:checked 选择器用于选中任何处于选中状态的
- radio（）单选按钮
- checkbox（）复选框
- 或 select 下拉列表元素中的 option 元素

<style>
  input:checked {
    box-shadow: 0px 0px 4px red; /*添加阴影效果*/
  }
  input:checked + div {
    display: none; /*隐藏元素*/
  }
  div {
    width: 50px;
    height: 50px;
    background-color: pink;
  }
</style>
<body>
  <input type="checkbox" />用户
  <div></div>
</body>

渲染效果： ![[Pasted image 20260226162827.png]]

具体案例应 - 制作单选开关，在后面的案例中会讲 ![[Pasted image 20260226162922.png]]

四、伪元素选择器¶

TIP

深入浅出伪元素选择器，带你轻松掌握 CSS 的高级用法。

1、::after (:after) 与 ::before (:before)¶

TIP

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素
::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content属性来为该元素添加装饰内容。此元素默认是行内元素。

语法：

element:after {
  ....样式声明....;
} /* CSS2 语法 */
element::after {
  ....样式声明....;
} /* CSS3 语法 */

element:before {
  ....样式声明....;
} /* CSS2 语法 */
element::before {
  ....样式声明....;
} /* CSS3 语法 */

TIP

CSS3 引入 ::before 和 ::after 是为了将伪类和伪元素区别开来

案例

<style>
  .box p:before {
    content: "前"; /*content属性必加，即时内容为空*/
    width: 30px;
    height: 30px;
    background-color: skyblue;
    display: inline-block;
  }
  .box p:after {
    content: "后"; /*content属性必加，即时内容为空*/
    width: 30px;
    height: 30px;
    background-color: pink;
    display: inline-block;
  }
</style>
<body>
  <div class="box">
    <p>..这是内容区..</p>
  </div>
</body>

渲染效果： ![[Pasted image 20260226163009.png]]

重点提示

::after 与 ::before 中的 content:'' 属性必写，即使内容为空也要写。

应用场景：

伪元素一般应用于创建不需要添加任何内容的元素，这个元素只是用来做样式修饰效果。比如制作黑色半透明遮罩层、箭头、三角形、圆形、光影等效果。

后面我们会在大量的案例中应用到他。

2、::placeholder¶

TIP

::placeholder 可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式

<style>
  input {
    height: 50px;
    width: 300px;
    border: 0;
    outline: none;
    padding-left: 10px;
    background-color: rgb(252, 237, 240);
  }
  /*请输入用户名的字体大小为 16px 同时颜色变为红色*/
  input.user::placeholder {
    font-size: 16px;
    color: red;
  }
</style>
<body>
  <p><input class="user" placeholder="请输入用户名" /></p>
  <p><input class="pwd" placeholder="请输入密码" /></p>
</body>

渲染效果： ![[Pasted image 20260226163117.png]]