溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css上下文選擇器有多少種類型，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
css上下文選擇器有四種類型：1、后代選擇器，可選擇當前元素的所有后代元素；2、父子選擇器，可選擇當前元素的所有子元素；3、同級相鄰選擇器，可選擇擁有共同父級且相鄰的元素；4、同級所有選擇器，可選擇擁有共同父級的后續所有元素。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
上下文選擇器就是構成了"父子"或層級關系的一組元素,通過他們的關系設置樣式
html 文檔,看上去就像一顆倒置的”樹”,所以是有層級結構的
每一個元素, 在文檔中, 都有自己的位置,即上下文關系
所以, 完全可以根據元素的上下文關系,來獲取到它們
一個元素的四種角色
| 序號 | 角色 | 描述 |
|---|---|---|
| 1 | 祖先元素 | 擁有子元素,孫元素等所有層級的后代元素 |
| 2 | 父級元素 | 僅擁有子元素層級的元素 |
| 3 | 后代元素 | 與其它層級元素一起擁有共同祖先元素 |
| 4 | 子元素 | 與其它同級元素一起擁有共同父級元素 |
四種上下文選擇器
| 序號 | 選擇器 | 操作符 | 描述 | 舉例 |
|---|---|---|---|---|
| 1 | 后代選擇器 | 空格 | 選擇當前元素的所有后代元素 | div p, body * |
| 2 | 父子選擇器 | > | 選擇當前元素的所有子元素 | div > h3 |
| 3 | 同級相鄰選擇器 | + | 選擇擁有共同父級且相鄰的元素 | li.red + li |
| 4 | 同級所有選擇器 | ~ | 選擇擁有共同父級的后續所有元素 | li.red ~ li |
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>上下文選擇器</title>
<style>
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
/* 類選擇器 */
.item {
font-size: 2rem;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
/* 后代選擇器 */
.container div {
border: 1px solid coral;
}
/* 父子選擇器,只有外層的div受影響 */
body > div {
border: 3px solid green;
}
/* 使用后代選擇器模擬父子選擇器 */
/* body div.container {
border: 3px solid green;
} */
/* 同級相鄰選擇器 */
/* 選擇與第5個相鄰的,即后面的"一個"元素 */
/* .item.center + .item {
background-color: lightgreen;
} */
/* 同級所有選擇器 */
/* 選擇與第5個后面的,有共同父級的所有兄弟元素 */
.item.center ~ .item {
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="item center">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>以上是“css上下文選擇器有多少種類型”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
