如何使用CSS递归选择所有子元素？

最新推荐文章于 2023-01-09 21:11:16 发布

扯线木偶人

最新推荐文章于 2023-01-09 21:11:16 发布

阅读量2.8k

点赞数

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

本文链接：https://blog.csdn.net/u014240783/article/details/115310504

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

当元素是某个元素的子元素时, 子选择器匹配。子选择器由两个或多个由">"分隔的选择器组成。也称为元素>元素选择器。它选择特定父级的所有元素。

语法如下：

选择所有子元素。
```
element > element
```
如果子元素递归选择, 则使用以下语法。
```
div.class, div.class > * {     // CSS Property }
```

示例1：本示例选择所有子元素。

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Child element selector
    </title>
      
    <style>
        div > p {
            background-color: green;
        }
    </style>
</head>
  
<body>
    <div>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <span>
            <p>Paragraph 3</p>
        </span>
    </div>
      
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
  
</body>
</html>

输出如下：

示例2：本示例以递归方式选择所有子元素。

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Child element selector
    </title>
      
    <style>
        div.GFG > * {
            background-color: green;
        }
    </style>
</head>
  
<body>
    <div class="GFG">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <span>
            <p>Paragraph 3</p>
        </span>
    </div>
      
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
  
</body>
</html>

输出如下：

更多前端开发相关内容请参考：lsbin - IT开发技术：https://www.lsbin.com/

查看以下更多CSS相关的内容：

扯线木偶人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用CSS递归选择所有子元素？

当元素是某个元素的子元素时, 子选择器匹配。子选择器由两个或多个由">"分隔的选择器组成。也称为元素>元素选择器。它选择特定父级的所有元素。语法如下：选择所有子元素。 element > element 如果子元素递归选择, 则使用以下语法。 div.class, div.class > * { // CSS Property } 示例1：本示例选择所有子元素。<!DOCTYPE html><html>
复制链接

扫一扫