CSS3选择器:类名的第一个类型?

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

不幸的是，CSS没有提供只选择类的第一个出现的:first-of-class选择器。作为一种变通方法，你可以使用这样的东西:

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

解决方案的解释和插图给出了在这里和在这里。

CSS选择器第4级草案建议在:nth-child选择器. c中添加of <other-selector>语法。这将允许你挑选出与给定的其他选择器匹配的nth子元素:

:nth-child(1 of p.myclass)

以前的草案使用了一个新的伪类:nth-match()，所以你可能会在一些关于该特性的讨论中看到该语法:

:nth-match(1 of p.myclass)

它现在是WebKit实现，因此在Safari中可用，但它似乎是唯一支持它的浏览器。有实现眨眼(铬)， 壁虎(Firefox)和请求在Edge中实现它的罚单，但这些都没有明显的进展。

作为一个后备方案，你可以像这样在父元素中包装你的类:

<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<div>
<!-- first-child / first-of-type starts from here -->
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
</div>

我找到了一个解决方案供你参考。从一些组div选择从组的两个相同的类div的第一个

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

顺便说一句，我不知道为什么:last-of-type工作，但:first-of-type不工作。

我的jsfiddle实验…https://jsfiddle.net/aspanoz/m1sg4496/

简单地:first适用于我，为什么还没有提到这一点?

这是一个旧的帖子，但我回复，因为它仍然出现在搜索结果列表的高。现在，未来已经到来，您可以使用:n -child伪选择器。

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

:n -child伪选择器功能强大——括号接受公式和数字。

更多信息在这里:https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

使用CSS3选择器: first-of-type选择具有给定类名的第一个元素是可能的。

然而，如果目标元素有一个先前的兄弟元素，你可以组合否定CSS伪类和相邻兄弟选择器来匹配一个没有立即具有相同类名的先前元素的元素:

:not(.myclass1) + .myclass1

完整的工作代码示例:

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { 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>

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
display:block;
background-color:#FFCC00;
}


.user:first-of-type{
background-color:#FF0000;
}
</style>


<p>Not working while this P additional tag exists</p>


<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>


<p>Working while inside a div:</p>


<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

您可以通过选择类中相同类的兄弟元素并反转它来实现这一点，这将选择页面上的几乎所有元素，因此您必须再次按类进行选择。

例如:

<style>
:not(.bar ~ .bar).bar {
color: red;
}
<div>
<div class="foo"></div>
<div class="bar"></div> <!-- Only this will be selected -->
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
</div>

我找到了一些工作 如果你有一个更大的类，其中包含网格之类的东西，你的另一个类的所有元素 你可以这样做

div.col-md-4:nth-child(1).myclass{
border: 1px solid #000;
}