CSS：如何选择ol标签中包含的所有ul标签

Question

我的HTML看起来像

<ol class='enlarge'>
<li>Larger
<ul>
<li>Normal
</li>
</ul>
</li>
</ol>

你看到更大的地方我希望字体大小更大。在你看到Normal的地方，我希望字体大小正常。

我已经尝试了

  ol.enlarge {
    font-size: 130%;
  }
  ul.enlarge {
    font-size: 70%;
  }

和

  ol {
    font-size: 130%;
  }
  ul > ol {
    font-size: 70%;
  }

和

  ol {
    font-size: 130%;
  }
  ol > ul {
    font-size: 70%;
  }

所有人都在为我的＆lt; ol＆gt;

中的所有内容设置更大的字体

谢谢！

- 汤姆

Answer 1

您正在寻找descendant combinator。选择ul元素中的任何ol元素。

ol {
  font-size: 130%;
}

ol ul {
  font-size: 70%;
}

<ol>
  <li>Larger
    <ul>
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

为什么你的尝试失败了？

案例1：

您错过了标记中的课程enlarge：

ol.enlarge {
  font-size: 130%;
}

ul.enlarge {
  font-size: 70%;
}

<ol class="enlarge">
  <li>Larger
    <ul class="enlarge">
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

案例2：

没有有序列表元素（ol）作为直接子元素，这就是child combinator不起作用的原因。请注意，根据语义HTML，ol元素不能是ul元素的直接子元素。

ol {
  font-size: 130%;
}

ul>ol {
  font-size: 70%;
}

<ol>
  <li>Larger
    <ul>
      <ol>Invalid</ol>
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

案例3：

与上述情况类似，没有ul元素作为ol元素的直接子元素。再次，它不是一个有效的标记。

ol {
  font-size: 130%;
}

ol>ul {
  font-size: 70%;
}

<ol>
  <ul>Invalid</ul>
  <li>Larger
    <ul>
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

Answer 2

ol ul应足以定位缩小字体大小所需的元素。

ol {
  font-size: 130%;
}

ol ul {
  font-size: 70%;
}

<ol>
  <li>Larger
    <ul>
      <li>Normal</li>
    </ul>
  </li>
</ol>

Answer 3

另一个想法是使用ol > li > ul {...}代替ol > ul {...}。无论如何，这取决于您计划使用的标记。请记住，>表示直接的孩子，这就是ol > ul无效的原因。

ol {
  font-size: 130%;
}

ol > li > ul {
  font-size: 70%;
}

<ol>
  <li>Larger
    <ul>
      <li>Normal
      </li>
    </ul>
  </li>
</ol>

Answer 4

不确定如果我完全理解你，那么这个怎么样。

OL LI { font-size: 130%; }
UL LI { font-size: 70%; }