這些ID /類有什麼區別？

Question

這些有什麼區別？

#hello-world p p #hello-world p#hello-world

如果你能給我每次將是最好的例子。 感謝

Answer 1

#hello-world p 

將匹配<p>段落標記，是任何標籤的孩子（或子兒）與ID你好世界，例如。 （DIV可以是任何東西）

<div id="hello-world"> <p>paragraph</p> </div> 

或

<div id="hello-world"> <section id="another-id"> <p>paragraph</p> </section> </div> 

...

p #hello-world 

將匹配任何標籤的ID你好，世界是一個孩子（或子兒）的<p>段落，例如：

<p> <span id="hello-world">anything</span> </p> 

或

<p> <a href="#"> <span id="hello-world">anything</span> </a> </p> 

...

p#hello-world 

只會匹配<p> paragrah標籤的ID你好世界，如：

<p id="hello-world">paragraph</p> 

Answer 2

的選擇：#hello-world p選擇所有<p>元素是元素的後代，其ID爲hello-world。

選擇器：p #hello-world選擇一個ID爲hello-world的元素，該元素來自<p>元素的後裔。

選擇器p#hello-world選擇一個<p>元素，其ID爲hello-world。

這裏是一個小提琴：https://jsfiddle.net/

Answer 3

有了這個CSS：#hello-world p { }，你會風格＃每一段你好世界元素。它可能是div，span，section或者其他。

With：p #hello-world { }你會風格＃hello-world元素在你頁面上的任何段落。請注意，ID（在本例中爲＃hello-world ID）必須是唯一的，並且只有一個元素應具有該ID。

隨着p#hello-world { }你會樣式的段落，其ID爲＃你好世界

我希望幫助。

Answer 4

假設您在詢問關於CSS選擇器以及哪些實際使用有意義，您首先需要意識到CSS選擇器是從右到左進行匹配的。

#hello-world p 

這將選擇每<p> - 元素和所有那些被驗證爲（某處）中的元件與該ID hello-world

<p><div id=hello-world><p>...</p></div></p> (matched the <p> inside <div id=hello-world>) 
<p><div id=hello-others><p>...</p></div></p> (does not match) 
<p><div><p id=hello-world>...</p></div></p> (doet not match) 

---

p #hello-world 

這將選擇與每一個元素編號hello-world（其中可能只是一個元素），並驗證該元素是（某處）在<p>元素。

<p><div id=hello-world><p>...</p></div></p> (matched the <div id=hello-world>) 
<p><div id=hello-others><p>...</p></div></p> (does not match) 
<p><div><p id=hello-world>...</p></div></p> (doet not match) 

---

p#hello-world 

這將選擇與該ID hello-world（其MAY只有一個元素）的每一個元素和該元素必須是<p> - 元素本身。

<p><div id=hello-world><p>...</p></div></p> (does not match) 
<p><div id=hello-others><p>...</p></div></p> (does not match) 
<p><div><p id=hello-world>...</p></div></p> (matches <p id=hello-world>) 

---

所有這些有意義的方式，所有這些都意味着不同的東西。哪一個最好取決於你和你的實施。

常識將決定該p #hello-world和p#hello-world是有些奇怪，因爲它基本上是聲稱你不知道在哪裏和/或在什麼元素，你會被應用ID hello-world。如果你確定它的位置/編號，你應該簡化它到#hello-world，因爲這是它會匹配的。