如何通过css只选择div内的元素

Question

在我的应用程序中，我需要提取div元素内部的数据，并排除section元素内部的文本，该元素也是div元素的子元素。

该代码段看起来像

<div class ="hrt">
  This is div text
   <p>This is paragraph text</p>
</div>

通过Css选择器我想要检索div文本：
在上述情况下，我希望我的解决方案是：这是div文本

Answer 1

您无法使用CSS定位文本节点。你必须用元素（span或其他）包装它们。

如果您无法修改HTML内容，则需要一些JS。

如果您需要帮助以通过JS实现此目的，请发表评论。

Answer 2

也许你可以简单地将display: none应用于子元素。

＆＃13;

＆＃13;

.hrt {
  font-weight: bold;
}
.hrt p {
  display: none;
}

＆＃13;

<div class ="hrt">
  This is div text
   <p>This is paragraph text</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以这样试试：

 .hrt {
     font-weight: bold;
 }

 .hrt>* {
     font-weight: initial;
 }

这样，你的风格只会影响元素内容，而不影响其子代。

Answer 4

您有两种选择。

选项一

将元素和样式中的第一个文本换行：

＆＃13;

＆＃13;

.hrt>p:first-child {
  font-weight: bold;
}

＆＃13;

<div class="hrt">
  <p>This is div text</p>
  <p>This is paragraph text</p>
</div>

＆＃13;

＆＃13;

＆＃13;

选项二

首先设置div中文本的样式，而不是覆盖段落中的文字：

＆＃13;

＆＃13;

.hrt {
  font-weight: 900;
}
.hrt p {
  font-weight: 100;
}
/* or to target all elements
.hrt * {
  font-weight: 100;
}
*/

＆＃13;

<div class ="hrt">
   This is div text
   <p>This is paragraph text</p>
</div>

＆＃13;

＆＃13;

＆＃13;