jquery - cssまたはjqueryセレクターは子を除外します

Question

ここで字幕を選択せず​​にタイトルを選択するにはどうすればよいですか？

<h1 id="banner">
This is the Title 
<span id="subtitle">and the subtitle</span>
</h1>

のようなことをしたい

h1 < span#subtitle {font-weight:bold}

また

h1:not(#subtitle) {font-weight:bold}

Answer 1

http://jsfiddle.net/PhSBE/を参照してください

使用するだけ

#banner{font-weight:bold} /* Title's rules */
#banner>#subtitle{font-weight:normal} /* Subtitle's rules */

編集：

テキストを抽出したい場合は、https：//stackoverflow.com/a/12135377/1529630を参照してください。

HTML要素を無視して要素からテキストを抽出する関数です。

Answer 2

字幕ではなくタイトルテキストのみを抽出するには、次を使用します。

var text = $("#banner").contents().filter(function () {
  if (this.nodeType == 3) { // Text Node
    return this;
  }        
})[0];

デモ。

Answer 3

太字に変更した場合、子要素は親からcssを継承しているため、通常h1に変更する必要がありますspan

いくつかの属性を作成したい場合はThis is the Title、別の属性を作成する必要があります<span>。