无法创建适当的CSS选择器

网页中有两种类型的链接。一种类型的链接包含class和itemprop，而另一个链接中只包含类。在下面的链接中，第一个是class和itemprop，第二个只有class。但是，如果我希望我的选择器不选择其中包含“itemprop”的链接，该选择器将如何显示？无法创建适当的CSS选择器

<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

来源

2017-07-25 SIM

我想有一点需要的语法修改。这可能做的工作

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

来源

2017-07-25 13:20:50 Sidtharthan

谢谢Sidtharthan，你的答案。有用。还有一件事要告诉你 - css选择器中的or操作符是什么，如“|”是为xpath。 – SIM

此主题有OR或AND运算符的更多信息。 https://stackoverflow.com/a/2797098/5909393 它可能会帮助你。 – Sidtharthan

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

具有特异性，你可以声明为

a.business-name[itemprop]

的风格是一样的风格为

进一步向下级联可以声明独特风格

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>

来源

2017-07-25 13:20:59 Rounin

感谢Rounin的回答。你也解决了我的另一个问题。也许这个“逗号”被认为是在我的代码中找到的CSS选择器中的“或”运算符。 – SIM

是的，逗号是CSS中的'或'运算符。 :-) – Rounin

无法创建适当的CSS选择器

回答

相关问题