p.classname 或 .classname p，有什么区别吗？答案

【问题标题】：p.classname or .classname p, any difference?p.classname 或 .classname p，有什么区别吗？
【发布时间】：2013-04-12 05:06:51
【问题描述】：

所以，我对这个简单的事情有点困惑，我已经尽可能多地用谷歌搜索，但我只是不知道谷歌搜索它的正确关键字，我尝试了 CSS 选择器等，没有答案足以清除我的困惑。所以我也进行了测试，p.classname 甚至似乎都不起作用，但根据我正在阅读的书中的定义（2012 年更新）

要在 CSS 中创建一个类并选择该类中的一个元素，您可以编写一个类选择器，像这样：

p.classname{ stuff }

所以现在你有了选择的方法

属于某个类的元素为它们设置样式。

我找不到

的定义

classname p，但我自己会给出类似这样的定义“选择所有属于classname的p元素”，基本相同。

p.classname 在我将“类名”提供给我仍然感到困惑时起作用，目前我想我只是打算永久使用 .classname p，它有效且基本相同。

所以，请帮我解决这个困惑，我用谷歌搜索过，我试图解决这个困惑，但没有奏效，它只会制造更多。

谢谢

【问题讨论】：

这里我们不把“SOLVED”放在标题上，我们选择答案。

标签： css class css-selectors

【解决方案1】：

所以当你这样做时

p.classname{
  ... 
}

您正在寻找 <p> 类 classname

当你这样做时

.classname p

您正在寻找一个p，它是classname 类的后代。

在 CSS 中，. 用作类名的选择器。

【讨论】：

.classname p 表示您正在寻找一个p，它是任何.classname 的后代。
我认为发布帮助我重新组合想法，但如果我真的明白了，我会说 p.classname 有点糟糕，因为你必须始终将相同的类名放在一个段落...因此，这种方式适用于不同 div 内的多个位置，而 .classname p 如果您想在一个 div 内设置所有 P 的样式，则很好？
in the subclass of classes by the name classname 头晕目眩，试图理解这一点：D
@EliasZan：没有好坏之分。这取决于你想做什么。您可以有多个元素具有相同的类。这完全取决于你在做什么。
CSS 解析是从右到左的。因此，如果不需要 p 选择器，.classname 就足够了。再次，取决于用途

【解决方案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>

它对类的作用与对元素的作用完全相同。

【讨论】：

是的，好吧，我想也许我终于明白了，正如我之前所说，如果我在一个页面中有 5 个 div 并且它们都有一个蓝色段落，我将一个类称为“蓝色”并执行此操作: p.blue { 颜色:蓝色;并且它只会选择具有此类的 5 个元素，而如果我需要使用“class p”将 5 个段落设为蓝色，我将需要为每个 div 进行更改，但是，如果我执行 div1 p.blue {color: blue;} （有可能吗？无论如何我都会在我发布后尝试）我假设只有 div1 p.blue 会变成蓝色，对吧？
是的，你也可以只选择一个这样的元素，但是 id 更适合这种用途。我会扩展我的答案以帮助您了解更多，很高兴它有所帮助。

【解决方案3】：

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

p.classname { stuff }

它只将该类名锁定到<p> 标签。

因此，如果您将class="classname" 放在其他任何内容中，除了<p> 标记之外，它不会对任何内容起作用。

【讨论】：