Question

是否可以在DIV中使用CSS选择第一个UL，这是我使用的HTML

<div class="block">
    <h2>External</h2>
    <ul>
        <li><span class="indicator success"></span>1</li>
        <li><span class="indicator success"></span>2</li>
    </ul>
    <ul>
        <li><span class="indicator success"></span>1</li>
        <li><span class="indicator success"></span>2</li>
    </ul>
</div>

Answer 1

使用first-of-type

ul:first-of-type {
    /* css rules */
}

<强> DEMO

ul:first-of-type {
  color: red
}

<div class="block">
  <h2>External</h2>
  <ul>
    <li><span class="indicator success"></span>1</li>
    <li><span class="indicator success"></span>2</li>
  </ul>
  <ul>
    <li><span class="indicator success"></span>1</li>
    <li><span class="indicator success"></span>2</li>
  </ul>
</div>

Answer 2

有两种方式来实现它：

ul:first-of-type
ul:nth-child(2)

`

Answer 3

使用：第一个孩子

ul:first-child {
    /* css rules */
}

Answer 4

您可以这样做：

ul:nth-of-type(1) {

/* CSS Rules */

}

Answer 5

之前的答案是正确的，但你应该在.block父选择器之前选择只在想要的div中选择：

＆＃13;

.block ul:first-of-type {
  color: red
}

＆＃13;

<div class="block">
  <h2>External</h2>
  <ul>
    <li><span class="indicator success"></span>1</li>
    <li><span class="indicator success"></span>2</li>
  </ul>
  <ul>
    <li><span class="indicator success"></span>1</li>
    <li><span class="indicator success"></span>2</li>
  </ul>
</div>

＆＃13;

使用CSS选择第一个UL

5 个答案: