我可以使用括号来分隔多个选择器吗？

Question

我想选择嵌套在类 article article_rubric_top 或类 article article_top article_right 的 div 下的第一个标签 a

我试试：

$('div.article.article_rubric_top a:first,div.article.article_top.article_right a:first')

但得到的标签比预期的要少得多。我想知道当我使用多个选择器时是否应该以某种方式分隔嵌套的标签选择器？

像这样：

$('(div.article.article_rubric_top a:first),(div.article.article_top.article_right a:first)')

更新： 最小数据示例。我希望匹配所有三个a 标签。

<div class="article article_rubric_top">            
            <a href="http://ua.korrespondent.net/showbiz/music/3899530-duet-potap-i-nastia-zaiavyv-pro-te-scho-yde-zi-stseny" class="article__img-link"></a>           
</div>

<div class="article article_top article_right">

            <a href="http://ua.korrespondent.net/ukraine/3899526-ukraintsi-pochaly-chastishe-yizdyty-v-rosiui" class="article__img-link">
                <noscript><img src="https://kor.ill.in.ua/m/400x253/2072539.jpg"></noscript><img src="/i/blank.gif" data-href="https://kor.ill.in.ua/m/400x253/2072539.jpg" alt="Українці почали частіше їздити в Росію" class="article__img lzl"></a>         
</div>

<div class="article article_rubric_top">          
            <a href="http://ua.korrespondent.net/ukraine/3899521-likari-dozvolyly-prodovzhyty-sud-nad-kokhanivskym" class="article__img-link">
            </a>           
</div>

更新由于某种原因，最小的例子不能作为我实际的example

Image of jquery run in browser

我得到div 和a 标签，而不仅仅是a 标签。

Answer 1

我不认为你可以。我从未尝试过，但我认为有更好的可能性。

你可以简化选择器

$(".article > a");

你可以join一个数组

$([
    "div.article.article_rubric_top a:first",
    "div.article.article_top.article_right a:first"
].join(","))

我认为这比使用更长的字符串要容易得多

Answer 2

尝试像这样编写你的选择器：

$('div.article.article_rubric_top,div.article.article_top.article_right').find('a:first')

这是一个有效的 sn-p，我想这就是你想要的？

$('div.article.article_rubric_top,div.article.article_top.article_right').find('a:first').css('border','1px solid red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article article_rubric_top">            
            <a href="http://ua.korrespondent.net/showbiz/music/3899530-duet-potap-i-nastia-zaiavyv-pro-te-scho-yde-zi-stseny" class="article__img-link">a</a>           
</div>

<div class="article article_top article_right">

            <a href="http://ua.korrespondent.net/ukraine/3899526-ukraintsi-pochaly-chastishe-yizdyty-v-rosiui" class="article__img-link">b
                <noscript><img src="https://kor.ill.in.ua/m/400x253/2072539.jpg"></noscript><img src="/i/blank.gif" data-href="https://kor.ill.in.ua/m/400x253/2072539.jpg" alt="Українці почали частіше їздити в Росію" class="article__img lzl"></a>         
</div>

<div class="article article_rubric_top">          
            <a href="http://ua.korrespondent.net/ukraine/3899521-likari-dozvolyly-prodovzhyty-sud-nad-kokhanivskym" class="article__img-link">c
            </a>
</div>

Answer 3

我希望匹配所有三个 a 标签。

您的选择器应该是div.article a:first-child - 不要将其与特定类过度复杂化。您有一个完全有效的共享类来定位适当的 div 元素。

$('.article a:first-child').css("background-color","yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article article_rubric_top">            
            <a href="http://ua.korrespondent.net/showbiz/music/3899530-duet-potap-i-nastia-zaiavyv-pro-te-scho-yde-zi-stseny" class="article__img-link">1</a>           
</div>

<div class="article article_top article_right">

            <a href="http://ua.korrespondent.net/ukraine/3899526-ukraintsi-pochaly-chastishe-yizdyty-v-rosiui" class="article__img-link">
                <noscript><img src="https://kor.ill.in.ua/m/400x253/2072539.jpg"></noscript><img src="/i/blank.gif" data-href="https://kor.ill.in.ua/m/400x253/2072539.jpg" alt="Українці почали частіше їздити в Росію" class="article__img lzl">2</a>         
</div>

<div class="article article_rubric_top">          
            <a href="http://ua.korrespondent.net/ukraine/3899521-likari-dozvolyly-prodovzhyty-sud-nad-kokhanivskym" class="article__img-link">3
            </a>           
</div>