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

Question

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

代码

  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;
  }

my scss 这个组件

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

Answer 1

.Collapsible .Collapsible__trigger {
  color: blue;
}

.Collapsible 选择带有 Collapsible class 的所有元素。 Collapsible_trigger 对 Collapsible__trigger class 做同样的事情。总之，该规则选择 .Collapsible 个元素中的所有 .Collapsible__trigger 个元素，并用蓝色文本设置它们的样式。

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

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

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

How to apply css to the property of the tag?

css

stylesheet

reactjs

scss-lint