【CSS基础】后代＞ + ~ 选择器

最新推荐文章于 2024-07-06 11:29:49 发布

Milk595

最新推荐文章于 2024-07-06 11:29:49 发布

阅读量688

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_43352901/article/details/108397846

版权

本文详细介绍了CSS中的四种选择器：后代选择器、子元素选择器（>）、相邻兄弟选择器（+）和后续兄弟选择器（~）。通过实例解析了它们各自的作用和应用场景，帮助读者更好地理解和使用这些选择器进行精准的元素定位。

摘要由CSDN通过智能技术生成

一、后代选择器

选取指定元素的后代元素

与子元素选择器相比，后代选择器选取的不一定是直接后代（儿子），而是作用于所有后代元素（儿子、孙子、重孙…）都可以。

实例：（选取类为 box的元素的 id为aa后代元素）

<!DOCTYPE html>
<html lang="en">
<head>
  <title>后代选择器</title>
  <style>
    .box #aa {
    
      background: palegreen;
    }
  </style>
</head>
<body>
    <div class="box">
        <p>aaaaaaaaaaaaa</p>
        <p>222222222222</p>
        <div>
          <p>wwwwwwwwwwww</p>
          <p id="aa