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

Question

我对 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)只是获取文本原始酒吧承认日期但不是实际日期

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

谢谢

Answer 1

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

Answer 2

定位strong:nth-child(1)只会获取 strong 标签中的内容。 我假设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>

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

Answer 4

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

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