CSS：not选择器无法正常工作

Question

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

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

但是，您可以将A设置为通过将LI转换为行内块级元素来用颜色填充LI。 这是您的代码的样子，请注意，在一种情况下，您将覆盖背景色，而在第二种情况下，则在“ lightgrey”中有一个空格。 我已修复了问题，假设您希望其中带有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 {}类中。

 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 4

希望将来：：has（）伪选择器将被实现，并使之更容易实现（即，选择具有/不具有特定元素的父对象）。