Question

Before, I had this working:

CSS

.categorie-image:not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)) {
    margin-top: 20px;
}

HTML

<div class="categorie-image custom-border" style="background-image:url(succes.png);">
    <div class="categorie-title">Text</div>
</div>

But then I needed to make the divs clickable, so I wrapped them inside a <a href="#">:

<a href="#">
    <div class="categorie-image custom-border" style="background-image:url(succes.png);">
        <div class="categorie-title">Text</div>
    </div>
</a>

But now my CSS is not working anymore. I know it has something to do with child elements, but I tried:

a.categorie-image:not(:first-of-type)...
a > .categorie-image:not(:first-of-type)...
div.categorie-image:not(:first-of-type)...

But without luck. How should I change my CSS?

Answer 1

以下选择器不再起作用，因为div class='categorie-image'是此父级中的第一个类型（a）。因此，否定（:not(:first-of-type)）将阻止元素被选中。

.categorie-image:not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)){
    margin-top: 20px;
}

<a href="#">
    <div class="categorie-image custom-border" style="background-image:url(succes.png);">
        <div class="categorie-title">Text</div>
    </div>
</a>

请注意，即使您已将否定附加到类选择器，nth-of-type选择器实际上也适用于元素类型。因此，您的选择器会选择每种类型（div，a，p等）的第一个元素，这些元素不是其中的第一个或第二个或第三个在每个父级中输入，也有类.categorie-image。

另外，当Vitorino fernandes指出in his comment时，最好避免将否定选择符链接起来，并使用nth-of-type(n+4)（或nth-child(n+4)以适合您的情况为准）选择第三个之后的所有元素。

虽然以上是选择器不再有效的原因，但我只能假设在添加a之前，您在div之前有一些其他div元素{ {1}}。

Answer 2

它不起作用，因为每个<div class="categorie-image">现在都是包裹<a>的子项。

您最好使用<a>作为选择器并使用子选择器。这是一个小提琴：https://jsfiddle.net/zsbzkg0m/

a:not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)) div.categorie-image{
    margin-top: 20px;
}

Answer 3

a 标签是内联元素， div 是块元素。

将块元素放入内联元素中并不是一个好习惯。

但是可以创建一个脚本来使整个div可以点击。像。的东西。

$("div").click(function() {
    window.location = $(this).find("a").attr("href"); 
    return false;
});

HTML：

<div class="categorie-image custom-border" style="background-image:url(succes.png);">
    <div class="categorie-title">Text</div>
    <a href="#">Link</a>
</div>

这会在div中查找 a 标记，您可以点击div上的任意位置，它会将您重定向到链接href值。

此案例您不必更改CSS。只是一个选择。

第n个类型的CSS选择器在<a> tag

3 个答案: