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标记中添加一个类，其中包含“阅读更多”文字。

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

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

1 个答案: