Question

除了第一个孩子，我正在尝试将某些样式应用于列表中的所有项目。我想我正确设置了sass，但是当前未应用该样式。

html

  <div class="list">
                    <div *ngFor="let item of data; index as i; first as isFirst; last as isLast"class="list-item">

                        <input class="radio" name="radio" type="radio" />
                        <label for="radio1">Buttom</label>
                    </div>

        </div>

无礼

 .list label:not(:nth-of-type(1))::before{
  background-color:blue;
}

Answer 1

您可以通过将所有项目bg设为蓝色，将第一个项目的bg设为白色或任何背景来实现此目的。

import org.hibernate.annotations.GenericGenerator
import org.hibernate.annotations.Parameter
import org.hibernate.id.enhanced.SequenceStyleGenerator
import javax.persistence.GeneratedValue
import javax.persistence.GenerationType
import javax.persistence.Id
import javax.persistence.MappedSuperclass

@MappedSuperclass
abstract class BaseEntity {

    @Id
    @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "sequenceGenerator")
    @GenericGenerator(name = "sequenceGenerator", strategy = "org.hibernate.id.enhanced.SequenceStyleGenerator",
            parameters = [
                Parameter(name = SequenceStyleGenerator.CONFIG_PREFER_SEQUENCE_PER_ENTITY, value = "true"),
                Parameter(name = SequenceStyleGenerator.OPT_PARAM, value = "pooled"),
                Parameter(name = SequenceStyleGenerator.INITIAL_PARAM, value = "1"),
                Parameter(name = SequenceStyleGenerator.INCREMENT_PARAM, value = "50")
            ]
    )
    var id: Long? = null
}

您的CSS应该是这样的：

<div class="list">
<div *ngFor="let item of data; let i=index"  [class.first]="i === 0">
    <input class="radio" name="radio" type="radio" />
<label for="radio1" class="lbl">{{item.name}}</label>

我认为您的数据是这样的：

label {
  background-color:blue;
}
.first label {
  background-color: #fff;
}

This is working example

Answer 2

如果您要选择除第一个以外的所有.list-item，则CSS如下：

.list-item:not(:nth-of-type(1))::before {
    content: '';
    background-color:blue;
}

由于您使用的是伪元素::before，因此您可能希望使用content: ''来指定某些内容，否则background-color将无效。

不是第n个子选择器不能在sass中工作

2 个答案: