p.classname 和 .classname p，有什么区别吗？

Question

所以，我对这个简单的事情有点困惑，我已经尽可能地搜索了谷歌，但我不知道正确的关键词，我尝试了CSS选择器等，没有一个答案足以消除我的困惑。所以，我也测试了p.classname，但似乎并不起作用，但在我正在阅读的一本书（更新于2012年）中的定义如下：

要在CSS中创建一个类并选择该类中的元素，您可以编写类选择器，如下所示：

p.classname{ stuff }

现在你有一种方法可以选择属于某个类的

元素来进行样式设置。

我找不到classname p的定义，但我会给出这样一个定义：“选择属于classname的所有

元素”，这基本上是相同的。

p.classname当我将“classname”赋予时有效。 我仍然感到困惑，目前我只能永久使用 .classname p ，它有效并且基本上是相同的。

因此，请帮我解决这个困惑，我已经搜索了谷歌，尝试帮助解决这个困惑，但是没有用，只会让困惑更多。

谢谢。

- Elias Zan

---

这里我们不会在标题上标注“已解决”，而是选择答案。 - jsedano

Answer 1

所以当你执行

p.classname{
  ... 
}

你正在寻找一个class为 classname 的 <p> 元素。

当你这样做时：

.classname p

您正在寻找属于类名classname的后代元素p。

CSS中.用作选择器表示类名。

- karthikr

---

.classname p зҡ„ж„ҸжҖқжҳҜдҪ жӯЈеңЁеҜ»жүҫд»»дҪ•.classnameзҡ„еҗҺд»Је…ғзҙ pгҖӮ - gen_Eric

我认为发布帖子有助于我重新整理思路，但如果我真的明白了，我会说p.classname有点糟糕，因为你必须一直在段落内放置相同的类名...所以这种方式适用于不同div内的多个位置，而.classname p则适用于您想要样式化一个div内的所有P？ - Elias Zan

@EliasZan：两种方法都不好或不坏。这取决于你想做什么。你可以拥有多个具有相同类的元素。这完全取决于你正在做什么。 - gen_Eric

CSS解析是从右到左的。因此，如果不需要p选择器，则.classname就足够了。再次强调，这取决于使用情况。 - Thanh Trung

@Ejay - 别再纠结了，刷新一下页面吧。 - karthikr

Answer 2

CSS通过按顺序读取每个规则来工作，例如。

p {font-weight: bold;}

p span {font-weight:normal;}

<p>Hiya</p> // BOLD

<p><span>HIYA</span></p> // NORMAL

同样适用于类。

.bold {font-weight: bold;}

span {font-weight:normal;}

<p class="bold">I AM BOLD <span>I AM NOT</span> BOLD AGAIN</p>

<p class="bold"><span> I AM ALL NORMAL</span></p>

所以在你的例子中，首先定义一个class，将会针对具有该类的每个元素。

在该类之后定义.class p，它将针对所有在该类内的p元素。

希望这能帮到你。

更新

这样你就可以更好地理解了。

div {color: blue;}
div p {color: red;}
div p span {color: yellow;}
div ul {color: purple;}

<div>I AM BLUE <p>I AM RED <span> I AM YELLOW</span></p>I AM BLUE</div>

<p>I HAVE NO CSS ATTACHED TO ME</p>

<div><ul><li>I AM PURPLE</li></ul> I AM BLUE</div>

它对于类(class)的使用和元素(elements)一样。

- GriffLab

---

是的，好的。我想我終於明白了。像我之前說過的那樣，如果頁面上有5個div並且它們都有一個藍色段落，我會調用類“blue”，然後這樣做：p.blue {color:blue;} 它只會選擇那些帶有這樣類的5個元素，而如果我需要使5個段落具有“類p”的藍色，我將需要為每個div進行更改，但是，如果我這樣做 div1 p.blue {color:blue;}（這真的可能嗎？我在發布後會試試看），我假定只有div1 p.blue會變成藍色，對吧？ - Elias Zan

是的，你也可以像那样只选择一个元素，但对于这样的用途，使用 id 会更好。我将扩展我的答案，帮助你更好地理解，很高兴能有所帮助。 - GriffLab

Answer 3

我会这样解释，如果你有以下CSS：

p.classname { stuff }

它将锁定该类名称仅适用于<p>标签。

因此，如果您在任何其他地方放置class="classname"，它将只在<p>标记上起作用。

- user11468975