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 來定位文本節點