CSS 离子无线电标签选择器

Question

我正在创建一个单选按钮列表，选中后应该会更改相应标签的颜色，但使用 css 选择器似乎根本不起作用。我在这里错过了什么？

template- 

<ion-list class="addressList">
    <ion-radio-group">
    <ion-item *ngFor="let address of address">
      <label for="ok" >  
        {{address.address}}
      </label>
      <ion-radio id="ok" class="radio-custom" mode='ios' slot="end" value="{{address.address}}"></ion-radio>
    </ion-item>
  </ion-radio-group>    
  </ion-list>

app.scss -

:checked + label {
  color: var(--ion-color-primary) !important;

}

Answer 1

我认为找出样式的最佳方法是使用 chrome 开发工具，单击有问题的项目并查看类这样的元素在“已检查”状态期间获得的内容：

然后您可以围绕它构建您的样式规则，但请注意，如果该元素位于“影子根”内，您需要使用 css 变量来应用样式（因为这些元素的样式会被封装在影子里dom)

<ion-list class="addressList">
    <ion-radio-group>
    <ion-item *ngFor="let address of [0,1,2,3,4,5,6,7]">
      <ion-label>address #{{ address }}</ion-label>
      <ion-radio mode='ios' slot="end" value="{{address}}"></ion-radio>
    </ion-item>
    </ion-radio-group>    
  </ion-list>

和css：

.item-radio-checked {
  color: red;
}

您可以与从此处创建的多个 CSS 变量 Ionic 团队一起玩：https://ionicframework.com/docs/api/item#css-custom-properties

这些应用于 ion-item 范围。

CSS 离子无线电标签选择器

CSS selector for ionic-radio labels

frontend

ionic4