如何使用CSS遞歸選擇所有子元素？下面本篇文章就來給大家介紹一下使用CSS遞歸選擇所有子元素的方法，希望對大家有所幫助。
原文地址：如何使用CSS選擇所有子元素？
當(dāng)元素是某個元素的子元素時，可以使用子選擇器匹配，該選擇器選擇特定父級的所有子元素。子選擇器由兩個或多個由“>”分隔的選擇器組成；它也稱為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>
效果圖：
相關(guān)推薦：
