Question

我正在浏览一个CSS示例，它的代码如下：

.sa-list li label > span,
.sa-list li h3 > span,
.sa-list li h4 > span,
.sa-list li a > div{
    position:relative;
    display:table-cell;
    vertical-align:middle;
    padding:10px 20px;
}

有人可以解释说li，a和div之间的关系，以及哪种风格在哪里？

Answer 1

这些规则的格式都是span，它是label，h3和h4以及div的直接子项。 a标记，所有这些都是li的后代，它也是类sa-list的元素的后代。

例如：

<ul class="sa-list">
  <li>
    <label>
      <span><!-- this span is styled --></span>
    </label>
  </li>
</ul>

<div class="sa-list">
  <ul>
    <li>
      <div>
        <h4>
          <span><!-- this span is also styled --></span>
        </h4>
      </div>
    </li>
  </ul>
</div>

<ul class="sa-list">
  <li>
    <a>
      <div><!-- this div is styled --></div>
      <div><!-- as is this div --></div>
      <section>
        <div><!-- this div is not, b/c it is not a direct child of the a --></div>
      </section>
    </a>
  </li>
</ul>

CSS类命名约定.sa-list li a＆gt; DIV {..}

1 个答案: