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

尝试.post.post_author.author_avatar img。

Answer 2

您的选择器代表

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.

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

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

CSS 选择器层次结构？如何通过逆向工程获得样式？

CSS selector hierarchy? How to reverse engineer to get the styling?

html

css

css-selectors