0

我无法弄清楚如何解决我遇到的超级烦人的边缘情况。

如何定位标签h1之后的 , ？cite由于cite包装在p标签内，我不知道如何遍历以定位它。

cite（从技术上讲）之间的差距p太大，但在“非cite”段落上，这很好。

TL:DR - 检查段落内部是否有cite标签，如果有 - 将h1标签上的 padding-top 更改为更少。如果段落没有cite内部，请保持不变。

http://codepen.io/anon/pen/Jksam

HTML

<link href='http://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<div class="post">
    <blockquote>
      <p>
          “Work is the curse of the drinking classes.”
      </p>
    </blockquote>

    <p>
      <cite>
          Oscar Wilde
      </cite>
    </p>

    <h1>
       This is a H1
    </h1>

    <p>
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>

    <h1>
       This is a H1
    </h1>
</div>

CSS

.post {
  width: 50%;
  padding-left: 25%;
  padding-top: 3rem;
}

h1 {
  color: #333332;
  font-family: 'Lato', sans-serif;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  font-weight: 900;
  font-size: 3.3rem;
}

p + h1 {
  padding-top: 4rem;
}

blockquote {
  border-left: 4px solid #ED5565;
  margin-left: -24px;
  margin-top: -1px;
}

cite {
  color: #b3b3b1;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  position: relative;
  top: -15px;
  padding: 0;
  margin: 0;
}

cite:before {
  content: "- ";
}

blockquote > p {
  padding: 1em; 
  margin: 0;
}

p {
  color: #333332;
  font-family: 'Gentium Book Basic', serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.8rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}
4

2 回答 2

3

您可以使用.has()方法或:has选择器：

$('p').has('cite').next('h1').css({'padding-top': 'value'});

假设应选择 selectedh1的所有下一个兄弟姐妹：p

$('p').has('cite').nextAll('h1').css({'padding-top': 'value'});
于 2013-08-29T13:06:13.113 回答
1

另一种方法是从 cite 标签开始使用，然后使用.closest()到达 p 标签 - 然后获取下一个 h1 元素

$('cite').closest('p').next('h1').css('padding-top','50px')
于 2013-08-29T13:08:25.420 回答