css上下文選擇器有四種類型：1、後代選擇器，可選擇當前元素的所有後代元素；2、父子選擇器，可選擇當前元素的所有子元素；3、同級相鄰選擇器，可選擇擁有共同父級且相鄰的元素；4、同級所有選擇器，可選擇擁有共同父級的後續所有元素。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css的上下文選擇器
上下文選擇器就是構成了"父子"或層級關係的一組元素,透過他們的關係設定樣式
html 文件,看起來就像一顆倒置的」樹」,所以是有層級結構的
每一個元素, 在文件中, 都有自己的位置,即上下文關係
所以, 完全可以根據元素的上下文關係,來獲取到它們
一個元素的四個角色
| 序號 |
角色 | ##描述 |
| ##1 | 祖先元素 | 擁有子元素,孫元素等所有層級的後代元素
| 2 | 父級元素 | 只擁有子元素層級的元素
| #3 | 後代元素 | 與其它層級元素一起擁有共同祖先元素
| 4 | 子元素 | #與其它同級元素一起擁有共同父級元素
#四個上下文選擇器
| #序號 | 選擇器 | 運算符 | 描述 | 範例
| #1 | 後位選擇器
|
| 選擇目前元素的所有後代元素
, body * |
|
| ##2父子選擇器 |
> |
#選擇目前元素的所有子元素 |
div > h2
|
| 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影片教學###）###
以上是css上下文選擇器的類型有什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
