Flex-获取列表中的第一个可见元素

在 Flex 布局中，通过使用 ::first-letter 伪元素选择器，您可以获取列表中的第一个可见元素。以下是一个示例：

.container {
  display: flex;
  flex-direction: column;
}

.container li:first-child {
  font-weight: bold;
}

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

在上面的示例中，.container 是一个包含列表项的 flex 容器。列表项使用 ::first-letter 伪元素选择器来获取第一个可见元素，并应用了粗体字体样式。

请注意，::first-letter 伪元素选择器只能用于块级元素，如 p、h1、h2、h3、h4、h5 和 h6。对于内联元素，如 span、a、b、i、u 和 sup，您需要使用其他方法来获取第一个可见元素。