给出以下标记:
<div>
<p class="eventPerformanceDate">...</p>
<p class="eventPerformance">...</p>
</div>
如果它是div中唯一的.eventPerformance
段,我想定位.eventPerformance
段。
我正在使用以下CSS尝试执行此操作,但它无法正常工作:
.eventPerformance:only-of-type {
border-bottom:none;
}
我误解了:only-of-type
的工作原理?
答案 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
标签没有样式,即使它是唯一的一个类型,因为它与条件的另一半不匹配(即,类选择器不匹配)。
p
&#13;
p, h4 {
border: 1px solid;
}
.eventPerformance:only-of-type {
border-bottom: none;
}
&#13;