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

Question

I am very new with CSS selectors and was wondering if there was something like a following sibling for them.

Example: I am trying to extract just the dates from this piece of code

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

The selector #Listing > div.col-sm-8.text-left.memberOnly > div.row > div.col-sm-7 > p:nth-child(4) > strong:nth-child(1) is only getting the text Original bar admit date but not the actual dates

Kindly advise if there is a way to get the dates only. I can also accommodate a Regex along with the selector if needed

Thanks

Answer 1

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

Answer 2

Targeting strong:nth-child(1) will just grab what's in the strong tag. I'm assuming p:nth-child(4) is .premiumOnly in your code. To extract just the dates, you can target that paragraph, and use regex and remove the stuff you don't want.

 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

If your actual use-case is just as your example is, you should be able apply a style to the entire paragraph (dates and strong text), and then remove that style from the strong text. What you're left with is a style that only affects the dates.

For example, if you wanted to make the dates red... 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

It is exists indeed, the selector A + B matches any B element preceded by an A element. It is not of help in you case however, because the strong element has no immediate siblings. The date you want to extract is a text node. You either wrap it in a span like <strong>Original bar admit date:</strong> <span>5/10/1974</span so you can match it by selecting strong + span

or alternatively use the DOM or jQuery API to target the text node