first-of-type不使用类名

Question

我在一个div中有很多元素，例如：

<div>
  <p></p>
  <span></span>
  <div class="text"></div>
  <span></span>
  <div class="text"></div>
  <div class="text"></div>

我想选择第一个.text，因此我使用.text:first-of-type但它不起作用，仅适用于span:first-of-type
有人可以告诉我如何选择第一个.text吗？

Answer 1

您正确地执行此操作。根据定义：

CSS中的第一个类型选择器允许您定位其容器中元素的第一个出现位置。它在CSS Selectors Level 3规范中定义为“结构伪类”

......它理论上应该适用于现代浏览器。它适用于最新版本的Firefox，IE和Chrome

• 您在HTML示例的最后一行错过了结束</div> - 如果这也在您的实际代码中，修复它有帮助吗？
• 在某个地方是否有另一种风格规则超越了你想要做的事情？如果将规则更改为.text:first-of-type !important会导致此规则具有更高优先级，会发生什么情况？

• 也许如果它嵌套在其他HTML中，您需要使.text：first-of-type规则更具体？例如。嵌套在另一个元素或类中的HTML - 在这种情况下通过指定它应用于该元素或类下的任何内容来应用规则，例如

  div .text：first-of-type {   红色; }