:only-of-type不按预期工作

时间:2016-02-26 15:08:14

标签: css css-selectors

给出以下标记:

<div>
    <p class="eventPerformanceDate">...</p> 
    <p class="eventPerformance">...</p>
</div>

如果它是div中唯一的.eventPerformance段,我想定位.eventPerformance段。

我正在使用以下CSS尝试执行此操作,但它无法正常工作:

.eventPerformance:only-of-type {
    border-bottom:none;
}

我误解了:only-of-type的工作原理?

1 个答案:

答案 0 :(得分:7)

与所有其他CSS *-of-type选择器一样,only-of-type选择器适用于元素的类型,而不是随附的附加条件。这里父类中有两个类型为p的元素,因此它没有任何效果。

.eventPerformance:only-of-type这样的选择器意味着,如果 还具有 {,则必须选择并设置父类下唯一类型的元素。 {1}}。它 并不意味着选择class='eventPerformance' 的唯一元素并为其设置样式。

在代码段中,您可以看到选择器如何影响第二个class='eventPerformance'包装中的p,因为它只有一个div元素。它还会影响第三个p包装器中的p,因为即使有两个元素div,仍然只有一个类型为class='eventPerformance'的元素。第三个p包装器中的h4也会被选中,因为父类中只有一个类型的元素,它也有类。

div选择器会选择 每种类型的唯一元素 ,只要没有附加类型选择器(例如only-of-type },p:only-of-type等。)

在第四个p.eventPerformance:only-of-type包装器中,div标签没有样式,即使它是唯一的一个类型,因为它与条件的另一半不匹配(即,类选择器不匹配)。

&#13;
&#13;
p
&#13;
p, h4 {
  border: 1px solid;
}
.eventPerformance:only-of-type {
  border-bottom: none;
}
&#13;
&#13;
&#13;