Question

我无法弄清楚如何定位我正在使用的超级烦人的边缘文件。

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

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

TL：DR - 检查段落中是否有cite标记，如果有，则将h1标记上的填充顶部更改为更少。如果段落中没有cite，请保持不变。

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;
}

Answer 1

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

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

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

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

Answer 2

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

$('cite').closest('p').next('h1').css('padding-top','50px')

根据另一个元素的位置更改元素属性 - jQuery

2 个答案: