CSS :not selector 没有按预期工作

Question

我正在尝试使用 CSS :not select 或者 select 所有不包含 link 的列表元素。即使第一个元素包含 link，出于某种原因它仍然遵循 :not selector 的 CSS 规则。这是 CSSDesk 上的示例：http://www.cssdesk.com/bFrgz

这是HTML

<ul>
    <li><a href="">One</a></li>
    <li>Two</li>
<ul>

这里是 CSS:

li {display: inline; border: 2px solid lightgrey; padding: 15px 20px 15px 20px; background: white;}

li:not(a) {color: white; border: 2px solid lightgrey; padding: 15px 20px 15px 20px; background: light grey;}

如有任何帮助，我们将不胜感激

Answer 1

抱歉，这无法完成。

您需要重新考虑 HTML 结构，因为 CSS 选择器目前不适用于以父元素为目标的子元素。

在这种特殊情况下，不要对 LI 设置样式，将 A 设置为块元素，将没有链接的元素放在 SPAN 或 DIV 周围，然后设置它们的样式就像你对主播所做的那样：

<ul>
    <li><a href="">One</a></li>
    <li><span>Two</span></li>
<ul>

CSS:

li {
    display: inline;
    margin: 0;
    padding: 0;
}

li a, li span {
    display: block;
    border: 2px solid lightgrey;
    padding: 15px 20px 15px 20px;
    background: lightgrey;
}

li a {
    color: red;
}

li span {
    color: black;
}

Answer 2

您根本不需要 :not() 选择器；只需将非锚元素的文本样式放在 li {} class.

中

li {
  display: inline;
  border: 2px solid lightgrey;
  padding: 15px 20px 15px 20px;
  background: lightgrey;
  color: white;
}

<li>One</li>
<li><a href="">Two</a>
</li>

Answer 3

首先，根据最初的问题，这是不可能的。您正在尝试 select 一个 LI 而不是 A。没有 HTML 元素可以是两种类型的元素。

也没有办法使用纯 CSS 到达 LI 内部，检测到它有一个 A，然后遍历树并向 LI 应用样式。

但是，您可以通过将 A 转换为行内块级元素来将 A 设置为用颜色填充 LI。这是您的代码的样子，请注意您在一种情况下覆盖了背景颜色，而在第二种情况下 'lightgrey' 中有一个 space。我修复了假设您希望带有 A 标签的 LI 具有白色背景。我使用负边距将边缘拉回，并将 A 上的边框归零，以便它仅使用 LI 的边框。如果你根本不想要边框，那么你需要从 LI 中删除边框。:

li a {
    display: inline-block; 
    border: 0px solid lightgrey; 
    padding: 15px 20px; 
    background: white;
    margin: -15px -20px;
}

li { 
    display: inline-block; 
    color: white; 
    border: 2px solid lightgrey; 
    padding: 15px 20px; 
    background: lightgrey;
}

您还可以实施 jQuery 解决方案，同时检测所有带有 A 的 LI，然后将 class 应用于 LI，然后您可以采用不同的样式：

 $('li a').parent().addClass('has-anchor');

CSS :not selector 没有按预期工作

CSS :not selector not working as intended

html

css

list

selector