如何在没有元素子元素的元素内部获取文本的css句柄

Question

如果我们使用tbody tr th，它会提供文字＆＃39;显示模型样本标题＆＃39;，包括其子元素（div）文本。 是否有任何可能的技巧只能获得＆＃39;显示模型＆＃39;不是它的子元素＆＃39;样本标题＆＃39;文本？

<table>
 <tbody>
   <tr>
     <th>
      Display model
      <div class="title">Sample Heading</div>
     </th>
    <td class="model">Data</td>
   </tr>
 </tbody>
</table>

Answer 1

工作演示jQuery Way

$(document).ready(function(){
    $('th').css('color','red').children().css('color','initial')

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tbody>
   <tr>
     <th>
      Display model
      <div class="title">Sample Heading</div>
     </th>
    <td class="model">Data</td>
   </tr>
 </tbody>
</table>

工作演示CSS方式

th{
  color:red;
}
th div{
  color:initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tbody>
   <tr>
     <th>
      Display model
      <div class="title">Sample Heading</div>
     </th>
    <td class="model">Data</td>
   </tr>
 </tbody>
</table>