html - 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

你的选择器代表

an img element
that is a descendant of a div element with the .author_avatar class
that is a descendant of an element with the .post_author class
that is a descendant of an element with the .post class.

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

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