在HTML頁面

Question

這裏直接引用塊元素是代碼

<div id = "content"> 
    <div id = "text"> 
    <h1>Text</h1> 
    </div> 
</div> 

我是一個新手，我想知道，如果可能的話，使用CSS，我可以套用樣式只對h1元素裏面的那些div沒有任何其他h1出這些div可以感受到風格。

Answer 1

是的，你可以：

div#content > div#text > h1 { some style here } 

在這種情況下，你會只觸摸h1它像你描述的被放置在層次結構。

Answer 2

是的。這是一個例子。

div#content div#text h1 {/* your style */} 

這將允許您只按這個特定順序添加css到這些項目。

Answer 3

在#content或#text之前沒有必要包含div，因爲每個id只能使用一次。如果您更改爲使用class，則可能需要在其之前包含div（例如div.content），以防其他標籤也使用class。

精確匹配結構

#text > h1 {/* Styles */} 

雖然你應該使用這個，如果你用class代替：

div.content > div.text > h1 {/* Styles */} 

這將匹配：

• <div id="content"><div id="text"><h1>

但不是：

• <div id="content"><div id="text"><div><h1>
• <div id="content"><div><div id="text"><h1>

匹配任何結構

#text h1 {/* Styles */} 

雖然你應該使用這個，如果你用class代替：

div.content div.text h1 {/* Styles */} 

這將匹配：

• <div id="content"><div id="text"><h1>
• <div id="content"><div id="text"><div><h1>
• <div id="content"><div><div id="text"><h1>