这些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，因为这是它会匹配的。