java - 如何获取没有元素子元素的元素内文本的CSS句柄

Question

如果我们使用tbody tr th，它会给出文本“显示模型示例标题”，包括其子元素 (div) 文本。是否有任何可能的技巧只获取“显示模型”而不是其子元素“示例标题”文本？

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