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

要仅提取标题文本而不是副标题，请使用以下命令：

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

演示。

Answer 2

见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 3

如果你改成h1粗体，你需要改成span普通，因为子元素是从父母那里继承css的

如果你想This is the Title只为它创建一些属性，你需要<span>为它创建另一个。