CSS选择器层次结构？如何进行逆向工程以获得造型？

Question

.post .post_author div.author_avatar img {

}

编辑:为了清楚，我有一个给定的CSS规则集，我想应用到我的html，我想知道如何设置html应用规则集，当规则指定一个类的集合。

如何从CSS中用html复制该选择器？

<div class="post post_author author_avatar"><img /></div>

这不是给了我css的样式吗？

Answer 1

您的选择器表示

img元素 它是带有div类的.author_avatar元素的后代。 它是具有.post_author类的元素的后代。 这是带有.post类的元素的后代。

这些类中的每一个都由一个单独的元素表示。每个选择器之间的空间是一个后代组合器。因此，您需要创建最多三个div(或其他元素取决于您的布局，但.author_avatar必须是一个div)：

<div class="post">
  <div class="post_author">
    <div class="author_avatar">
      <img />
    </div>
  </div>
</div>

Answer 2

试试.post.post_author.author_avatar img。