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

Question

给出以下标记：

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

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

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

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

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

Answer 1

与所有其他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;