帶有第一個孩子僞語法的CSS ID選擇器是否使用空格正確？

Question

我見過的答案使用以下格式使用的第一個孩子僞選擇提示：

/* Type */ 
P:first-child { 
    margin:0px; 
} 

/* Class */ 
.myClass:first-child { 
    margin:0px; 
} 

/* ID */ 
#myDiv:first-child { 
    margin:0px; 
} 

對我來說，我的ID選擇。我只見過一些使用ID的人。在我的代碼我無法得到它的工作，除非我把一個空間的ID和僞類之間，像這樣：

#myDiv :first-child { 
    margin:0px; 
} 

這是正確的嗎？

這是我的工作代碼：

<div id="richText59"> 
    <UL> 
     <LI> 
     <FONT FACE="Verdana" COLOR="#000000" LETTERSPACING="0" KERNING="1" style="font-size:12px">Bullet List</FONT> 
     </LI> 
    </UL> 
</div> 

<div id="RichText808"> 
    <P ALIGN="left"> 
     <FONT FACE="Verdana" COLOR="#000000" LETTERSPACING="0" KERNING="1" style="font-size:12px"> 
     <B> 
      <I>Rich Text</I> 
     </B> 
     </FONT> 
    </P> 
    <P ALIGN="left"> 
     <FONT FACE="Verdana" COLOR="#000000" LETTERSPACING="0" KERNING="1" style="font-size:12px"> 
     <B> 
      <I>paragraph two</I> 
     </B> 
     </FONT> 
    </P> 
</div> 

CSS：

#RichText808 { 
    position:absolute; 
    top:107px; 
    left:35px; 
    width:240px; 
    display:inline-block; 
    height:166px; 
    display:inline-block; 
    margin-top:-0.2em; 
    margin-top:0; 
} 

#richText59 { 
    position:absolute; 
    top:107px; 
    left:335px; 
    width:240px; 
    display:inline-block; 
    height:166px; 
    display:inline-block; 
    margin-top:-0.2em; 
} 

在HTML標記上述情況，div的內容將發生變化。我不控制內容。問題是div的內容被壓低了大約10px。

通過使用第一個孩子選擇器，我可以刪除將內容壓下的邊距。所以是的，我有容器元素的ID，但沒有控制該元素的內容。

Answer 1

使用空間（空白）之間或不是語義差異，它在什麼組附加選擇是實際施加元件的控制上：

• #myDiv:first-child： 不分隔空白表示您嘗試過濾ID爲「myDiv」的元素集。這顯然沒有意義，但在語義上是有效的。

• #myDiv :first-child： 分離空白意味着你的所有元素的選擇了內選定格，這樣子元素。請注意，這不僅與直系孩子相匹配，而且還與子系統之後的孩子相匹配。

• #myDiv > :first-child： 分隔「大於」（箭頭）表示您從所選div的所有直接子元素中選擇一個。 Sp這樣做而不是匹配層次結構下面的元素。

Answer 2

#myDiv:first-child才生效#myDiv是他父母的第一個孩子。

#myDiv :first-child指向#myDiv的後代的所有第一個孩子。

實施例：

#myDiv:first-child { 
 
    padding: 20px; 
 
    background: green; 
 
} 
 
#myDiv :first-child { 
 
    background: red; 
 
}

<div id="myDiv"> 
 
    <p>#1</p> 
 
    <p>#2<span>#2-1</span><span>#2-2</span></p> 
 
</div>

Answer 3

您想要選擇具有特定ID的元素的第一個子元素。換句話說，你想要選擇一個元素作爲第一個子元素，並且具有一個具有特定ID的元素作爲祖先。要做到這一點的方法是

#id :first-child 
    ↑    SPACE MEANS ANCESTOR/DESCENDANT RELATIONSHIP 

與兩者之間的空間。

在我的代碼我無法得到它的工作，除非我把一個空間的ID和僞類之間，像這樣：

權。那是因爲這是空間意味着。它意味着「後裔」。在這種情況下，這意味着「#id的任何後裔，這是first-child」。那就是你想要的。

#id:first-child 

不起作用，因爲它沒有說你想要什麼。它的意思是「與#id的ID，這也是第一個孩子的元素。這就是當你有沒有空間運行選擇在一起，這意味着什麼。這不是你想要的。這就是爲什麼它不工作。

我見過的答案使用以下格式使用的第一個孩子僞選擇提示：

不能盲目照搬的東西不理解是什麼意思選擇之間的空間表示非常具體的事情吧。意味着空間右側的東西是後裔左邊的東西。在你的情況下，你想刪除邊距的段落是帶有ID的元素的後代。因此，你需要和想要的空間。爲你的困惑的原因

部分可能是，我們很少看到僞類，如:first-child完全靠自己，沒有在他們面前的一個ID或一類什麼的，像span:first-child或.class:first-child。所以你可能想知道爲什麼:first-child這裏有一個額外的空間。其實，:first-child本身就是一個完美的選擇器，即使沒有其他的東西在前面。當然，如果你喜歡寫#id p:first-child這沒問題，但是如果你已經知道第一個孩子是p就沒有必要。只有當您想要解決均爲p s 和第一個孩子的元素時，才需要將其編寫爲p:first-child。這裏重複一遍，表示兩個不同選擇器#id和:first-child之間的後代關係。

請參閱MDN here的相關文檔。引用：

後代組合子 - 通常由一個單一的空間表示（）中的selector₁ selector₂形式字符 - 結合了兩個選擇器，使得由第二選擇器（selector₂）匹配元件被選擇如果它們具有與第一選擇器（selector₁）匹配的祖先元素。使用後代組合器的選擇器稱爲後代選擇器。