css “＞“与“+“

最新推荐文章于 2024-07-24 15:15:31 发布

珞珈山小鲁班

最新推荐文章于 2024-07-24 15:15:31 发布

阅读量210

点赞数

文章标签： css vue

本文链接：https://blog.csdn.net/weixin_48286936/article/details/114254121

版权

CSS:
">"为子元素选择器，可以选择父元素的某一个子元素，而不是所有的后代子元素；
"+"为相邻兄弟选择器，两个元素有相同的父元素；
需求：
项目里经常会碰到类似列表样式的一行一行数据显示，且每行有一定间隔。
案例：
在这里插入图片描述
代码：

<div class="detail">
     <div class="item">
          <p class="label">评价维度</p>
          <p class="info">{{ item.evaluateDimension }}</p>
      </div>
      <div class="item">
          <p class="label">评价一级指标</p>
          <p class="info">{{ item.oneIndicatorName }}</p>
      </div>
      <div class="item">
           <p class="label">评价二级指标</p>
           <p class="info">{{ item.twoIndicatorName }}</p>
      </div>
 </div>

CSS代码：

 .detail {
    padding: 0.1rem 0;
    > .item {
      line-height: 0.36rem;
      display: flex;
      & + .item {
        margin-top: 0.1rem;
      }
      .label {
        width: 2rem;
        font-size: 0.28rem;
        color: #262626;
      }
      .info {
        color: #8c8c8c;
      }
    }
  }