前端基础笔记——关系选择器

最新推荐文章于 2021-04-21 11:30:59 发布

恬一

最新推荐文章于 2021-04-21 11:30:59 发布

阅读量131

点赞数

分类专栏：李立超前端学习

本文链接：https://blog.csdn.net/weixin_44158539/article/details/107822344

版权

前端学习同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

李立超

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    /*
       为div的子元素span设置一个字体颜色红色
       （为div直接包含元素span设置一个颜色）
       子元素选择器
               -作用：选中指定父元素的指定子元素
               -语法：父元素>子元素
               eg:
               div>span{
                   color:red;
                        }
     
    */
    
     div>span{
        color:red;
    }
    /*
      后代元素选择器：
                -作用:选中指定的后代元素
                -语法：祖先 后代

    */
     div span{
           font-size:30px;
     }
     /*
       兄弟元素选择器：
                 -语法：前一个+下一个
       选择下边所有的兄弟：  
                 -语法：兄~弟

     */
     div+span{
          color:green;
     }
   
</style>

</head>
<body>
    <!-- 
        父元素
        子元素
        祖先元素：直接或间接包含后代的元素叫做祖先元素，
                一个元素的父元素也是祖先元素
        后代元素
        兄弟元素
        注 ： 按照正常的亲缘关系理解
    -->
    <div>
        div标签
      <p>
          div中的p元素
          
      </p>
          <span>
              p元素中的span
          </span>
    </div>
    <span>div外的span</span>
</body>
</html>

恬一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础笔记——关系选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><style> /* 为div的子元素span设置一个
复制链接

扫一扫