CSS3 选择器:具有类名的第一个类型? [英] CSS3 selector :first-of-type with class name?

问题描述

是否可以使用 CSS3 选择器 :first-of-type 来选择具有给定类名的第一个元素?我的测试没有成功，所以我认为不是?

代码(http://jsfiddle.net/YWY4L/):

p:first-of-type {color:blue}p.myclass1:first-of-type {color:red}.myclass2:first-of-type {color:green}

<div>此文本应正常显示</div><p>这个文本应该是蓝色的.</p><p class="myclass1">此文本应显示为红色.</p><p class="myclass2">此文本应显示为绿色.</p>

解决方案

不，不能只使用一个选择器.:first-of-type 伪类选择它的 type (div, p,等等).使用具有该伪类的类选择器(或类型选择器)意味着选择一个元素，如果它具有给定的类(或属于给定类型)并且是其类型中的第一个兄弟姐妹.

不幸的是，CSS 没有提供 :first-of-class 选择器，它只选择第一次出现的类.作为一种解决方法，您可以使用以下方法:

.myclass1 { color: red;}.myclass1 ~ .myclass1 { color:/* 默认，或从父 div 继承 */;}

在此处提供了解决方法的说明和插图a> 和这里.

Is it possible to use the CSS3 selector :first-of-type to select the first element with a given class name? I haven't been successful with my test so I'm thinking it's not?

The Code (http://jsfiddle.net/YWY4L/):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

解决方案

No, it's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.

Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Explanations and illustrations for the workaround are given here and here.

这篇关于CSS3 选择器:具有类名的第一个类型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！