怎样应用CSS递归挑选全部子原素？下边这篇文章内容就来给大伙儿详细介绍一下应用CSS递归挑选全部子原素的方式，期待对大伙儿有一定的协助。
当原素是某一原素的子原素时，可使用子挑选器配对，该挑选器挑选特殊父级的全部子原素。子挑选器由2个或好几个由“>”隔开的挑选器构成；它也称之为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>
实际效果图：
到此这篇有关详细说明怎样应用CSS挑选全部子原素的文章内容就详细介绍到这了,大量有关CSS挑选全部子原素內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 建站平台有哪些_如何建设网站_免费自助建站_如何建立一个网站_网站建站的 版权所有 （网站地图） 粤ICP备10235580号