CSS混淆点

first-child last-child

助记法： css 是从右向左翻译的

因此 p:first-child 译为：作为第一个子元素的p;  p:first-of-type 译为：作为第一个类型为p的元素

<div class="content">
    <h3>接单</h3>
    <p>接  单 人：<span class="name">李四</span></p>
    <p>描 述：<span class="desc">东西方向路牌倒塌，情况紧急，尽快处理。</span> </p>
    <span class="cd-date">2018-07-01  12:34:23</span>
</div>

.content p:first-child {
    margin-top: 0.52rem;
}

.content p:last-child {
    margin-top: 0.32rem;
}

两个都无效

 

.content p:first-of-type {
margin-top: 0.52rem;
}

.content p:last-of-type {
margin-top: 0.32rem;
}

 

问题： css选择第2个元素之后的元素

css选中子元素中不是第一个元素的3种方法

 

CSS绝对定位和固定定位

主要： 

绝对定位：以盒子为参考点 - 子绝父相；
固定定位：就是相对浏览器窗口定位

详解