CSS的nth-child(n)的注意点

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
html代码:
//顶部banner组件
functionBanner():any {
  return (
    <divclassName={styles.banner}>
      <span>氚云</span>
      <span>随需而变的业务管理工具</span>
      <Button>售后工单</Button>
      <Button>渠道管理</Button>
      <Button>企业协同</Button>
    </div>
  );
}
css代码
.banner {  
  button:nth-child(3) { //为什么这里是从3开始的?
    left: 77px;
  }
  button:nth-child(4) {
    left: 181px;
  }
  button:nth-child(5) {
    left: 284px;
  }
}
效果图

image.png

注意:用element:nth-child(n)选择器的时候,是先看nth-child(n)的,比如这里要想选中第一个Button元素,就应该是nth-child(3),因为第一个Button元素是div元素的第三个子节点!

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看