css - 为什么我的文字周围的边框消失了？

Question

我网站上的边框消失了，塌陷了，我不知道为什么。请有人解释为什么会发生这种情况的理论，以便我能够充分理解该过程以在将来解决类似问题？

寄宿生应该出现在 .me p:last-child {

围绕“阅读更多”一词。

CSS

.wrap {
margin: 0px auto;
width: 80%;
margin-top: 10px;
padding: 3em 0em;
position: relative; 
color: #FFF;
}

.me h2 {
margin-top: 2.7em;
font-size: 3.1em;
font-weight: 600;
z-index: 10;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
vertical-align: baseline;
width: 100%;
height: 100%;
text-align: baseline;
}

.me p {
top: 90%;
font-size: 1.4em;
height: 80px;
font-family: sans-serif;
font-weight: 400;
line-height: 29px;
text-align: center;
margin: 0px auto;
width: 77%;
vertical-align: baseline;
padding: 0px 0px 35px 0px; 
}

.me p:last-child {
display: inline-block;
font-size: 1em;
font-weight: 600;
text-decoration: none;
text-align: center;
border: 10px solid red;
border-radius: 5px;
vertical-align: baseline;
width: 100px;
height: 25px;
padding: 12px 30px;
position: absolute;
top: 85%; 
left: 42.5%; 
}

.image {
background-image: url("http://24.media.tumblr.com/tumblr_lgbgj5Yj5P1qdwr2ro1_500.jpg");
background-size: 110% 100%;
padding: 0px 0px 150px 0px; 
}

HTML

<div class="image">
 <div class="wrap">
  <div class="nav">

     <h1>Resume</h1>
 <ul>
   <li>Home</li>
   <li>Portfolio</li>
   <li>Skills</li>
   <li>Experience</li>
   <li>Contact</li>
 </ul>

  </div>

  <div class="me">
    <h2>Andrew Hardiman</h2>
    <p>Webdesigner & Developer</p>
    <p>Read More</p>
  <span></span>
  </div>

   </div>
   </div>

Answer 1

因为 p 元素并不是真正的 last-child 而是 div.me 元素中的倒数第二个元素。删除最后一个 span 元素或将类添加到 p 标签，其中包含“Read More”文本。

See Demo和 learn more关于 :last-child 伪选择器。