Question

<div className={classes.scoreContainer}>
    <span className="label">
      {`${scorecard.score.totalRuns||0}/${scorecard.score
      .totalWickets||0}${isCurrentInning?"*":""}`}
    <span className="overclass">
        ({`${scorecard.score.overs}.${
        scorecard.score.overBalls
        }ov`}) // want to change font of this
    </span>
    </span>
</div>

我希望机器人将数据显示在同一行上，但第二个跨度内的数据使用不同的字体大小。

这是CSS。

    scoreContainer {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "flex-end",
      "&>span:first-child": {
      fontWeight: 520,
      },
      "&>span:second-child":{
      fontWeight:10,
      },
      "&>span:nth-child(2)": {
      fontWeight: 300,
      fontSize: "2vh",
      }
    }

但是我不能正确地跨度。我们不能创建两个跨度并将它们放到div内，因为这会在两个不同的行上把它们拉屎。这不是我们能做的

    <div>
      <span>data1</span>
       <span>data2</span>
    </div>

Answer 1

"&>span>span":{
    fontWeight:10,
    /* fontWeight: 300, don't know if you need 10 or 300 */
    fontSize: "2vh",
}

如@Mukyuu所建议，以上将是span中第一个（也是唯一的）子span中div的选择器

样式问题和访问子项

1 个答案: