讓我們看一下第一個代碼bolow其他分區中選擇一個元素
<div class="div1">
<p>Hello There</p>
</div>
<div class="div-main">
<p>Hello There</p>
</div>
我想div1選擇在div-main<p> .suppose我有div2，而不是div1。在這種情況下，我怎麼能選擇<p>的div-main
我想：
div1+div-main p{}
但它不應該工作。那裏有工作職能嗎？
使用.div-main > p {...}選擇p標籤.div-main元素
內，但如果你只需要選擇那些直接承接.div1元素，用這個（？）：
.div1+.div-main p { color: red; }<div class="div1">
<p>Hello There</p>
</div>
<div class="div-main">
<p>Hello There</p>
</div>使用.div1來定位類div1
使用~找到下一個.div-main類
使用>瞄準孩子p
.div1 ~ .div-main > p{
\t color: red;
}<div class="div1">
<p>Hello There 1</p>
</div>
<div class="div2">
<p>Hello There 2</p>
</div>
<div class="div-main">
<p>Hello There Main</p>
</div>所有類選擇首先必須從一個點被preceeded」 .div，主「和」.div1「。代碼：
.div1+.div-main p {
color:red;
}
.div2+.div-main p {
color:green;
}<div class="div1">
<p>next red</p>
</div>
<div class="div-main">
<p>Hello There</p>
</div>
<div class="div2">
<p>next green</p>
</div>
<div class="div-main">
<p>Hello There</p>
</div>
<div class="div-main">
<p>Green ? no!</p>
</div>HTML
<body>
<div class="div1">
<p>Hello There</p>
</div>
<div class="div-main">
<p>Hello There</p>
</div>
</body>
CSS
<style>
.div-main p {
color:Blue;
}
</style>
https://www.w3schools.com/code/tryit.asp?filename=FEVSB2EMHKLD