如何使用CSS选择所有子元素?

yanghs · · 114 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

如何使用CSS递归选择所有子元素?下面本篇文章就来给大家介绍一下使用CSS递归选择所有子元素的方法,希望对大家有所帮助。

原文地址:如何使用CSS选择所有子元素?

当元素是某个元素的子元素时,可以使用子选择器匹配,该选择器选择特定父级的所有子元素。子选择器由两个或多个由“>”分隔的选择器组成;它也称为element > element选择器。

注:子选择器只能选择自己的子类,第二级元素,而不能选择第二级别以下的元素。

语法:

选择指定元素的所有指定子元素

element1 > element2

如果想要递归选择所有子元素,则使用以下语法

element1 > * {

    // CSS样式

}

示例1:选择所有子元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>子元素选择器</title>

<style>

        .demo > p{

            background-color: green;

            padding: 5px;

        }

</style>

</head>

<body>

    <div class="demo">

        <p>段落 1</p>

        <p>段落 2</p>

        <span>段落 3</span>

        <div>段落 4</div>

    </div>

    <p>段落 6</p>

    <p>段落 7</p>

</html>

效果图:

示例2:以递归方式选择所有子元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>子元素选择器</title>

<style>

        .demo > *{

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="demo">

        <p>段落 1</p>

        <p>段落 2</p>

        <span>段落 3</span>

        <div>段落 4</div>

    </div>

    <p>段落 6</p>

    <p>段落 7</p>

</html>

效果图:

相关推荐:

angularjs教程

golang教程

redis入门教程


有疑问加站长微信联系(非本文作者)

本文来自:简书

感谢作者:yanghs

查看原文:如何使用CSS选择所有子元素?

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:1006366459

114 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传