zoukankan      html  css  js  c++  java
  • nth-child和nth-of-type的使用案列

    HTML:
    <div id="footer-f">
    <ul class="trajectory">
    <li>
    <div class="logo" style="vertical-align: middle"><img style=" 100%;" src="" alt="logo"></div>
    <dl>
    <dt>小星星</dt>
    <dd><img src="img/Distances.png" alt="D"><span>351.7KM</span><img src="img/Altitude.png" alt="A"><span>500M</span>
    </dd>
    <dd><img src="img/Date.png" alt="D"><span>2016-06-01</span><img src="img/Datesfm.png" alt="D"><span>00:00:00</span><img src="img/Speed.png" alt="D"><span>1.9KM/H</span></dd>
    </dl>
    <div class="Details" ><img src="img/Details.png" alt="D">
    </div>
    </li>
    </ul>
    </div>

    CSS:
    #footer-f {
    overflow: scroll;
    background-color: #ffffff;
    height: 77%;
    }

    .trajectory > li {
    overflow:hidden ;
    height: 72px;
    position: relative;
    }
    .trajectory > li:first-child {
    height: 105px;
    }

    .trajectory > li > div, .trajectory > li > dl {
    float: left;
    box-sizing: border-box;
    }
    .trajectory > li > div:nth-child(1) {
    75px;
    }

    .trajectory > li > dl {
    65%;
    position: absolute;
    left: 85px;
    }

    .trajectory > li > dl > dd:nth-child(1) {
    margin-top: 6px;
    }

    .trajectory > li > dl > dd {
    position: relative;
    }

    .trajectory > li > dl > dd img {
    7px;
    }

    .trajectory > li > dl > dd:first-of-type span:last-child{
    position: absolute;
    left: 43%;
    }

    .trajectory > li > dl > dd:last-of-type span:last-child{
    position: absolute;
    left: 73%;
    }

    .trajectory > li > dl > dd:last-of-type span:nth-of-type(2){
    position: absolute;
    l
    eft: 43%;
    }
    .trajectory > li > dl > dd:first-of-type img:last-of-type{
    position: absolute;
    bottom: 33%;
    left:41%;
    }

    .trajectory > li > dl > dd:last-of-type img:last-of-type{
    position: absolute;
    bottom: 33%;
    left:71%;
    }

    .trajectory > li > dl > dd:last-of-type img:nth-of-type(even){
    position: absolute;
    bottom: 33%;
    left:41%;
    }
    .trajectory > li > div:nth-child(3) {
    45px;
    }
    关于nth-child和:nth-of-type的区别

    :nth-child可以选择父元素下的字元素,:nth-of-type也可以。但是它们到底有什么区别呢?

    其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,

    而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。
  • 相关阅读:
    WPF系列学习之三(路由事件)
    WPF学习系列之二 (依赖项属性)
    WPF学习笔记系列之一 (布局详情)
    常用CDN公共库
    Day2-运算+流程控制+函数
    Day1-shell
    Day10-rsync
    Day2-EMOS
    Day9-Postfix
    Day1-dns Extension
  • 原文地址:https://www.cnblogs.com/mo-cha/p/5733735.html
Copyright © 2011-2022 走看看