HTML选择器的使用

最新推荐文章于 2024-04-24 19:55:30 发布

cu4

最新推荐文章于 2024-04-24 19:55:30 发布

阅读量964

点赞数

分类专栏：伪类标签文章标签： html 前端 css

本文链接：https://blog.csdn.net/wuwei_19981001/article/details/127214697

版权

一、关系选择器

（1）父子关系

直接层级关系为父子关系，用#big>p{}

作用：选中指定父元素下面指定的子元素，才会产生效果。

语法：父元素>子元素{}

例如：div>p,.big>p,#big>p{}

<!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>Document</title>
    <style>
        #big>p{ color: red;}
    </style>
</head>
<body>
     <div id="big">
        大超市
        <p class="sx">生鲜区</p>
        <div class="ym">
          衣帽区
          <span
            >上衣
            <em>男上衣</em>
            <em>女上衣</em>
          </span>
          <span>裤子</span>
          <span>帽子</span>
        </div>
        <p>零食区</p>
        <p>酒水区</p>
      </div>
      <div>
        <p>烟酒区</p>
        <p>饮料</p>
        小超市
      </div>
</body>
</html>

（2）兄弟关系

同一层级为兄弟关系，选择下一个兄弟。

作用：选择下一个兄弟

语法：兄+弟{}

例子：.sx+div{ font-size:30px; background-color:green;}

<!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>Document</title>