无法创建合适的 CSS 选择器答案

【问题标题】：Can't create an appropriate css selector无法创建合适的 CSS 选择器
【发布时间】：2017-12-31 10:38:10
【问题描述】：

网页中有两种类型的链接。一种类型的链接同时包含 class 和 itemprop，而另一种仅包含 class。在下面的链接中，第一个是 class 和 itemprop，第二个是只有 class。但是，如果我希望我的选择器不选择其中包含“itemprop”的链接，那么该选择器会是什么样子？

<a href="/los-angeles-ca/mip/crispy-crust-hollywood-location-443529?lid=1000226108758" itemprop="name" class="business-name"></a>

<a href="/los-angeles-ca/mip/casa-bianca-pizza-pie-13519?lid=1000203432051" data-analytics="{&quot;target&quot;:&quot;name&quot;,&quot;feature_click&quot;:&quot;&quot;}" rel="" class="business-name" data-impressed="1"></a>

我尝试过以下一个，但它选择了所有：

a.business-name

当我尝试使用这个时，它只选择两个项目的链接：

a[itemprop="name"].business-name

当我尝试使用它只获取其中的类时，它不起作用：

a[not(itemprop="name")].business-name

【问题讨论】：

标签： css css-selectors

【解决方案1】：

我认为需要对语法进行一些更改。这可以完成这项工作

a.business-name:not([itemprop="name"])

【讨论】：

感谢 Siddharthan，您的回答。有用。你要知道的最后一件事 - css 选择器中的 or 运算符是什么，如“|”用于 xpath。
此线程有更多关于 OR 和 AND 运算符的信息。 stackoverflow.com/a/2797098/5909393可能对你有帮助。

【解决方案2】：

传统的解决方案是使用特异性和级联：

具体来说，你可以声明样式为

a.business-name[itemprop]

和for的样式一样

在级联的下方，您可以声明不同的样式

a.business-name

由于最后一个选择器不太具体，它不会覆盖级联中更具体的选择器。

a {
display: block;
line-height: 32px;
font-size: 16px;
}

a, a.business-name[itemprop] {
color: red;
font-weight: normal;
}

a.business-name {
color: green;
font-weight: bold;
}

<a href="#">Random Normal Link</a>

<a href="/los-angeles-ca/mip/crispy-crust-hollywood-location-443529?lid=1000226108758" itemprop="name" class="business-name">Link with itemprop</a>

<a href="/los-angeles-ca/mip/casa-bianca-pizza-pie-13519?lid=1000203432051" data-analytics="{&quot;target&quot;:&quot;name&quot;,&quot;feature_click&quot;:&quot;&quot;}" rel="" class="business-name" data-impressed="1">Link without itemprop</a>

【讨论】：

感谢鲁宁的回答。你也解决了我的另一个问题。也许这个“逗号”被认为是我在您的代码中找到的 CSS 选择器中的“或”运算符。
是的，逗号是 CSS 中的or 运算符。 :-)