zoukankan      html  css  js  c++  java
  • 前端css 同级元素 设置不同样式 :first-child :nth-child() 的操作收藏

    说明:最近在写前端vue  调样式的时候遇到了一个问题 同一个div下对多个同级别的<span>标签进行 边距设置

    <div class="shuju-div">
      <span>数据A</span>
      <span>数据B</span>
      <span>模型C</span>
      <span>模型D</span>
      <span>模型E</span>
      <span>场景F</span>
    </div>
    
    <style>
        .shuju-div {
          margin-top: -240px;
          margin-left: 78px;
          z-index: 99999;
          position: absolute;
        }
        .shuju-div > span {
          color: #68e3d5;
          font-family:"微软雅黑";
          font-size: 14px;
        }
        // nth-child()的索引是从1开始的
        .shuju-div > span:nth-child(1) {
          margin-left: 60px;
        }
        .shuju-div > span:nth-child(2) {
          margin-left: 60px;
        }
        .shuju-div > span:nth-child(3) {
          margin-left: 45px;
        }
        .shuju-div > span:nth-child(4) {
          margin-left: 60px;
        }
        .shuju-div > span:nth-child(5) {
          margin-left: 60px;
        }
        .shuju-div > span:nth-child(6) {
          margin-left: 50px;
        }
    </style>
    
    //其中span:nth-child(1)可以被替换为 sapn:first-child
        .shuju-div > span:first-child {
          margin-left: 60px;
        }
    //但是 并没有 什么 second-child  ··· 但是有 last-child

     总结:这个是对面同事跟我说的,很感谢他。咱前段基础很菜  但是不怕菜,点滴积累即可

  • 相关阅读:
    shell脚本
    vim使用快捷键
    logback.xml_appender配置
    vim配置文件
    sed
    使用linux服务器安装wordpress博客详细教程
    JDBC为什么要使用PreparedStatement而不是Statement
    Jsp技术介绍
    jsp的appilication.getInitParameter()方法无法获取到值的问题
    ubuntu 插网线无法上网解决方案
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/11692260.html
Copyright © 2011-2022 走看看