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

确实存在，选择器A + B匹配前面带有B元素的任何A元素。但是，在你的情况下没有帮助，因为strong元素没有直接的兄弟姐妹。要提取的日期是文本节点。你可以用span之类的方式包装它 <strong>Original bar admit date:</strong> <span>5/10/1974</span 所以你可以选择strong + span

来匹配它

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

Answer 3

定位undefined只会获取强标记中的内容。我假设您的代码中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);

Answer 4

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

例如，如果您想将日期设为红色... 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>

CSS选择器是否有以下兄弟

4 个答案: