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

<强> DEMO

Answer 3

如果您将h1更改为粗体，则需要将span更改为正常，因为子元素正在从父母处获取css

如果您想为This is the Title制作一些属性，则只需为其创建另一个<span>。