CSS选择器是否有以下兄弟姐妹答案

【问题标题】：Is there a following sibling for CSS selectorsCSS选择器是否有以下兄弟姐妹
【发布时间】：2017-01-20 12:13:29
【问题描述】：

我对 CSS 选择器非常陌生，想知道是否有类似以下兄弟姐妹的东西。

示例：我试图从这段代码中提取日期

<p class="premiumOnly">
<strong>Original bar admit date:</strong> 5/10/1974<br>
<strong>Colorado bar admit date:</strong> 5/10/1974

选择器 #Listing > div.col-sm-8.text-left.memberOnly > div.row > div.col-sm-7 > p:nth-child(4) > strong:nth-child(1) 仅获取文本原始栏承认日期，而不是实际日期

如果有办法只获取日期，请告知。如果需要，我还可以容纳正则表达式和选择器

谢谢

【问题讨论】：

提取物是什么意思？
这不是“跟随兄弟”。它是“跟随文本”。 CSS 中没有文本选择器。
CSS 选择器帮助您选择元素，然后您可以操作并查看其内容。据我们所知，您的日期在不同的 HTML 元素中不是，因此实际上没有任何选择。
也许你应该指定你使用什么库来抓取这个 HTML。现在其他人都假设你正在使用 CSS 来设置元素的样式（我不能错 - 你确实标记了你的问题 [css]）。

标签： html css-selectors

【解决方案1】：

您必须使用span 或其他标签包裹您想要设置样式的文本才能选择它。

【讨论】：

【解决方案2】：

定位strong:nth-child(1) 只会抓取强标签中的内容。我假设您的代码中 p:nth-child(4) 是 .premiumOnly 。要仅提取日期，您可以定位该段落，并使用正则表达式并删除您不想要的内容。

var p = document.getElementById('p').innerHTML;
p = p.replace(/<strong>.*<\/strong>|<br>|\n/g,'');
console.log(p);

<p class="premiumOnly" id="p">
  <strong>Original bar admit date:</strong> 5/10/1974<br>
  <strong>Colorado bar admit date:</strong> 5/10/1974
</p>

【讨论】：

【解决方案3】：

如果您的实际用例与您的示例一样，您应该能够将样式应用于整个段落（日期和强文本），然后从强文本中删除该样式。剩下的就是只影响日期的样式。

例如，如果你想让日期变成红色...https://jsfiddle.net/1sdqoug5/

    p.premiumOnly {
        color: red;
    }
    
    p.premiumOnly > strong {
        color: initial;
    }

    <p class="premiumOnly">
      <strong>Strong Text: </strong> date<br>
      <strong>Strong Text 2: </strong> date
    </p>

【讨论】：

【解决方案4】：

确实存在，选择器A + B 匹配任何前面有A 元素的B 元素。但是，这对您没有帮助，因为 strong 元素没有直接的兄弟姐妹。您要提取的日期是一个文本节点。您可以将其包装在 span 中 <strong>Original bar admit date:</strong> <span>5/10/1974</span 所以你可以通过选择strong + span来匹配它

或者使用 DOM 或 jQuery API 来定位文本节点

【讨论】：

好吧，在这种情况下，还有一种方法，将他想要定位的文本包装在一个跨度中
@torazaburo：“提取”确实意味着“选择”，但不用于样式目的。据我所知，“提取”仅用于网络抓取的上下文中。如果提问者使用 Selenium WebDriver，那么 JS 解决方案是合适的（尽管 WebDriver 有一个专门的方法可以从所需的元素中提取文本）。目前，尽管提问者没有提及他们使用什么工具或库来抓取 HTML。
@torazaburo: ... OTOH 如果他们真的是仅限于 CSS 选择器，那么他们可能不走运，虽然我想不出很多情况其中仅采用选择器字符串而不是运行任意代码的方法或工具也不接受 XPath（这将是一个完全可行的替代方案）。