（例如）p.post {color：＃336;}和.post p {color：＃336;}之间有什么区别？

Question

我总是在样式表中使用这个结构：

.post {padding: 10px;}
.post h1 {color: #336;}
.post p {font-size: 1em;}

使用这个html：

<div class="post">
<h1>title</h1>
<p>content</p>
</div>

但是，我经常在样式表中看到这个结构：

h1.post {color:#336;}
p.post {font-size: 1em;}

使用这个html：

<h1 class="post">title</h1>
<p class="post">content</p>

我正在研究一个我将给予他人的主题，因此，它的作用还不够 - 我希望它反映“最佳实践”（并让我不要成为一个全新的人）。

我找到答案的尝试并未成功 - 也许是因为搜索条件（元素，选择器，CSS等）过于宽泛。

提前感谢你的帮助。

（另外，谢谢过去的帮助。这是我的第一个问题，但不是我第一次访问该网站。）

Answer 1

他们指定略有不同的东西。

• p.post匹配p元素（仅一个p元素） 的类别为{{1} }}。
• post匹配.post p元素，该元素是另一个具有p类的元素的后代。

组合或细化元素以形成CSS规则的运算符的一般术语是选择器或组合器。在CSS3中，它们由this document定义。 post是类选择器的示例，而p.post说明了后代组合。

Answer 2

已经回答，但有一些HTML示例。 [] subbed for tags。

p.post - [p class =“post”]你好[/ p]

.post p - [div class =“post”] [p]你好再次[/ p] [/ div]