Question

我从我的一个选择器中得到了一些奇怪的结果。

重置后，我有一些基本设置 - 这是一个：

a:not([class]) {
    text-decoration:underline;

    &:link, &:visited, &:hover, &:active {
        color:@primaryColor;
    }
    &:hover {
        text-decoration:none;
    }
}

它完成了这项工作 - 部分。

没有href的锚点

<a class="link-more mt24">Learn more</a>

但是这个带有href的锚点不起作用。

<a class="link-more mt24" href="https://www.bbc.co.uk">Learn more</a>

通过工作我的意思是第一个链接被正确地忽略，第二个链接不会被忽略，即使它有一个类。

为了完整起见，这就是Less推出的内容：

a:not([class]) {
  text-decoration: underline;
}
a:not([class]):link,
a:not([class]):visited,
a:not([class]):hover,
a:not([class]):active {
  color: #03a9f4;
}
a:not([class]):hover {
  text-decoration: none;
}

有什么想法吗？

Answer 1

行为符合预期。 a:not([class])会选择并设置不具有a属性的class个元素。因此，下面代码段中的第三个a带有下划线，因为它没有class属性。

第一个a没有获得下划线，因为没有分配a属性的href元素默认情况下不会获得下划线。这是因为text-decoration: underline通常使用a:-webkit-any-link之类的选择器设置（特定于WebKit，但其他UA将具有类似的选项）。

第二个a具有下划线，因为UA为a标记应用了默认样式（如上所示）。 a:not([class])对它没有任何影响（也就是说，它不是下划线的原因）因为选择器甚至不会指向该元素。

如果您希望a的所有class元素都没有下划线，请使用a[class]并删除下划线。

＆＃13;

a[class] { /* if you remove this selector, the second link will be underlined */
  text-decoration: none;
}
a:not([class]) {
  text-decoration: underline;
}
a:not([class]):link,
a:not([class]):visited,
a:not([class]):hover,
a:not([class]):active {
  color: #ff0000;
}
a:not([class]):hover {
  text-decoration: none;
}

＆＃13;

<a class="link-more mt24">Learn more</a>
<a class="link-more mt24" href="https://www.bbc.co.uk">Learn more</a>
<a href="https://www.bbc.co.uk">Learn more</a>

＆＃13;

CSS选择器给出奇怪的结果

1 个答案: