Question

我正在尝试使用CSS：not selector来选择所有不包含链接的列表元素。即使第一个元素包含链接，由于某种原因它仍然遵循：not选择器的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

首先，根据原始问题，这是不可能的。你试图同时选择一个不是A的LI。没有HTML元素可以是两种类型的元素。

使用纯CSS也无法到达LI内部，检测到它有A，然后遍历树并将样式应用于LI。

但是，您可以通过将其转换为内联块级元素来设置A以使用颜色填充LI。这是您的代码的样子，请注意您在一个案例中覆盖了您的背景颜色，并且在＆lt; gregrey＆＃39;在第二。我修复了假设您希望其中带有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并将一个类应用于LI，然后你可以用不同的方式设置它：

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

Answer 2

抱歉，但这无法完成。

您需要重新考虑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 3

根本不需要：not（）选择器;只需将非锚元素的文本样式放在li {}类中。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS：不是选择器不按预期工作

3 个答案: