Question

我将列表添加到使用li在HTML中显示的数组的顶部。现在，我试图将css添加到li的第一个孩子中。我尝试了以下代码。

.ts

this.skills.push({title: 'Play button clicked'});

.html

    <div class="column" class="steps">
        <h2>Steps:</h2>
        <ul *ngFor = "let post of skills" >
            <li>{{ post.title}}</li>
        </ul>
    </div>



.css

.steps li:first-child { 
    background-color: yellow;
}
.steps li:not(::first-line) {
}

我的问题是，此CSS已添加到所有添加的li中。我不想对li显示不同的CSS，但第一个除外。

Answer 1

您当前的选择器（.steps li:first-child）很好；问题是您在class元素（<div>）上具有两个 <div class="column" class="steps">属性，该属性是无效的HTML。将两者合并为一个属性可以解决此问题，如下所示：

.steps li:first-child {
  background-color: yellow;
}

<div class="column steps">
  <h2>Steps:</h2>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

如果要具有多个<ul>元素，但只希望突出显示第一个<ul>元素的第一个子元素，则需要.steps ul:first-of-type li:first-child：

.steps ul:first-of-type li:first-child {
  background-color: yellow;
}

<div class="column steps">
  <h2>Steps:</h2>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Answer 2

纯角度方式

HTML

<ul>
  <li *ngFor="let item of array(9); let i = index" [class.firstElem]='i==0'></li>
</ul>

TS

  array(n) {
    return Array(n);
  }

CSS

.firstElem {
  color : red;
}

stackblitz.com

中的工作示例

如何在ul的第一个元素中添加样式？

2 个答案: