0

私が抱えている非常に厄介なエッジケースをどのようにターゲットにできるかを考えるのに苦労しています。

タグh1の後に来る ,をターゲットにするにはどうすればよいですか? タグ内にラップされているciteため、トラバースしてターゲットにする方法がわかりません。citep

cite(技術的には)の間のギャップpが大きすぎますが、「非cite」段落では問題ありません。

TL:DR - 段落にciteタグが含まれているかどうかを確認し、含まれている場合は、タグの上部のパディングをh1より少ないものに変更します。段落に内部がない場合は、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'});

h1選択したの次のすべての兄弟を選択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 に答える