javascript - ul 和 div 中第一个 li 元素的具体行为

Question

我有以下问题: 例如，在 div 中有三个 ul 元素。每个 ul 元素都包含一个或多个 li 元素。 我想要的是将特定属性添加到第一个 ul 中的第一个 li，但其他 li 不会这样做没有相同的行为。

<div class="class1">
    <ul>
      <li>          
        <div class="type">
            some text
        </div>
        <p>some more text</p>       
      </li> 
      <li>          
        <div class="type">
            text2
        </div>
            <p>more text 2</p>          
      </li> 
    </ul>
    <ul>
      <li>   
        <div class="type">
            some new text
        </div>
        <p>more some new text</p>       
       </li>    
       <li>         
        <div class="type">
            text 3
        </div>
            <p>more text 3</p>      
       </li>    
    </ul>
</div>

我的 CSS 如下所示:

.class1 ul:first-child li {
    border-top: #000000 1px solid;
}

但这并不像我希望的那样工作，而且由于我是 CSS 的新手，所以我不知道如果不使用 JS 我能做什么。 有人对我有什么建议吗？ :)

Answer 1

只需选择第一个 li 以及 :first-child:

.class1 ul:first-child li:first-child

JSFiddle Demo