Question

这就是我的HTML的样子（有趣......我知道）：

<p itemscope="" itemtype="http://schema.org/PostalAddress" itemprop="address" class="adr">
  <span itemprop="streetAddress" class="street-address">6306 N Cicero Ave</span>
  <span itemprop="addressLocality" class="locality">Chicago,&nbsp;</span>
  <span itemprop="addressRegion">IL</span>&nbsp;
  <span itemprop="postalCode">60646</span>
</p>

我想单独选择的是状态跨度和邮政编码范围......又名

<span itemprop="addressRegion">IL</span>

和

<span itemprop="postalCode">60646</span>

鉴于它前面的范围有一个类：

<span itemprop="addressLocality" class="locality">Chicago,&nbsp;</span>

我感兴趣的人既没有class也没有id，我如何单独选择这两个？

Answer 1

您只需要使用attribute属性。

https://jsfiddle.net/25euucb0/

[itemprop~=addressRegion] {
    border: 5px solid yellow;
}

[itemprop~=postalCode] {
    border: 5px solid red;
}

Answer 2

使用（+）选择器，它会找到下一个兄弟元素。

编辑：刚刚使用了（〜）兄弟选择器，检查出来。

请检查：https://jsfiddle.net/4xzyva6L/

HTML

<p itemscope="" itemtype="http://schema.org/PostalAddress" itemprop="address" class="adr">
  <span itemprop="streetAddress" class="street-address">6306 N Cicero Ave</span>
  <span itemprop="addressLocality" class="locality">Chicago,&nbsp;</span>
  <span itemprop="addressRegion">IL</span>&nbsp;
  <span itemprop="postalCode">60646</span>
</p>

CSS：

.locality ~ span{
    background-color:lime;
}

Answer 3

您可以使用Attribute Selector：

span[itemprop="addressRegion"], span[itemprop="postalCode"] { 
   color: red;
}

Answer 4

使用CSS伪类 :not()

将属性选择器作为参数放在 not() 选择器中，例如 span:not([atttribute])

 .adr span:not([class]){
    background-color:yellow;
  }

.adr span:not([class])+span{
    background-color:orange;
}

检查Working Demo

如何只选择一个特定的dom元素，该元素在另一个特定的元素之后没有类或ID？

4 个答案: