css - 如何将css应用于标签的属性？

Question

我是 css 新手，我想知道 css 是否可以应用于标签的属性？例如，在下面的代码中，我希望看到 entry.count 和蓝色的“文件”。

代码

  render() {

    return(
      <div className="AppL" id="AppList">

        {this.createApplicationList()}
      </div>); 
  }

  createApplicationList() {
    var guiResult = [];
    for (var key in this.state.AppName) {
      var entry = this.state.AppName[key];
      guiResult.push(
      <Collapsible trigger={entry.AppName + "\t" + "\t"  + entry.Count + " files"} className="AppList" transitionTime ="10"> 
      </Collapsible>);
    };  
    return guiResult;
  }

我这个组件的 scss

.AppList{
  color: black;
  border-bottom: 1px solid #00a886;
    padding-top:10px;
    padding-bottom:10px;
}

Answer 1

.Collapsible .Collapsible__trigger {
  color: blue;
}

.Collapsible选择Collapsible该类的所有元素。对班级Collapsible_trigger做同样的事情。Collapsible__trigger该规则一起选择.Collapsible__trigger元素中的所有.Collapsible元素，并使用蓝色文本设置它们的样式。

这完全基于您提供的 HTML 代码。JavaScript 似乎无关紧要。

.Collapsible .Collapsible__trigger.is-closed也有效并且更具体。取决于您的用例。