Question

这些有什么区别？

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

如果你能给我一个最好的例子。感谢

Answer 1

#hello-world p

将匹配具有ID hello-world的任何标记的子（或子子）的段落标记，例如。（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为hello-world的任何标记，该标识为段落的子（或子子），例如：

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

或

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

...

p#hello-world

仅匹配带有ID hello-world的 paragrah标签，例如：

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

Answer 2

选择器：#hello-world p选择所有个元素，这些元素是ID为hello-world的元素的后代。

选择器：p #hello-world选择ID为hello-world的元素，该元素来自元素。

选择器p#hello-world选择ID为的{{1}}元素。

这是一个小提琴：https://jsfiddle.net/

Answer 3

在css：#hello-world p { }中使用它，您可以设置＃hello-world元素中的每个段落的样式。它可能是div，span，section或者是什么。

使用：p #hello-world { }，您可以在页面的任何段落中设置＃hello-world元素的样式。请注意，ID＆＃39;（在本例中为＃hello-world ID）必须是唯一的，并且只有一个元素应具有id。

使用p#hello-world { }，您可以设置ID为＃hello-world

的段落

我希望有所帮助。

Answer 4

假设您正在询问CSS选择器以及实际使用哪些有意义，您首先需要意识到CSS选择器从右到左匹配。

#hello-world 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的每个元素（ MAY 仅为一个元素），并且该元素在元素中被验证为（某处）。

<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

这将选择标识为hello-world的每个元素（ MAY 只是一个元素），该元素必须是 - 元素本身。

<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有点奇怪，因为它基本上声称你不确定在哪里和/或你将使用哪个元素{{1} }。如果您确定其位置/ ID，则应将其简化为hello-world，因为它无论如何都会匹配。

这些ID /类有什么区别？

4 个答案: