溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細介紹“css語言中怎么使用后代選擇器”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“css語言中怎么使用后代選擇器”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。
在css中，后代選擇器用來選擇特定元素或元素組的所有指定后代元素，需要將對父元素的選擇放在前面，對子元素的選擇放在后面，中間加一個空格分開，語法為“父元素 子元素{css樣式}”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
后代選擇器也稱包含選擇器，用來選擇特定元素或元素組的后代，將對父元素的選擇放在前面，對子元素的選擇放在后面，中間加一個空格分開。
后代選擇器集中形式：
1、父代 * {}從 父代 中的找到 所有子代。
2、父代 子代1{} 是從 父代 中找到 子代1 或者 父代 子代2{} 是從 父代 中找到 子代2 。
3、父代 子代1 子代2{} 這個是從 父代 中找到子代1，再從 子代1 找到 子代2.
后代選擇器中的元素不僅僅只能有兩個，對于多層祖先后代關系，可以有多個空格加以分開，如id為a、b、c的三個元素，則后代選擇器可以寫成#a #b #c{}的形式，只要對祖先元素的選擇在后代元素之前、中間以空格分開即可。
第一種形式：雖然是全部選中但是*的優先級較低。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
padding: 20px;
background: rgba(255,0,0,0.2); //這是給它一個紅色，透明度為0.2
}
.a *{
border: 2px solid black; //這里是選中類a的所有后代
}
</style>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="c">c</div>
</div>
</div>
</body>
</html>
第二種形式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
padding: 20px;
background: rgba(255,0,0,0.2);
}
.a .b{
border: 2px solid black; //同理這里選擇 .c 也是可以的因為他們都是 .a 的后代。
}
</style>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="c">c</div>
</div>
</div>
</body>
</html>
第三種形式:它并不可以同時選中 .b 和 .c，只能選中.c.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
padding: 20px;
background: rgba(255,0,0,0.2);
}
.a .b .c{
border: 2px solid black;
}
</style>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="c">c</div>
</div>
</div>
</body>
</html>
還有一點需要注意如下代碼：在類名為c的p中嵌套了一個p 中再嵌套了一個類名為c的p，這時同樣會被選中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
padding: 20px;
background: rgba(255,0,0,0.2);
}
.a .b .c{
border: 2px solid black;
}
</style>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="c">c
<div>
<div class="c">span</div>
</div>
</div>
</div>
</div>
</body>
</html>css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
感謝您能讀到這里，小編希望您對“css語言中怎么使用后代選擇器”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
