是否可以使用CSS3 Select 器:first-of-type Select 具有给定类名的第一个元素?我的考试没有成功,所以我想不是吗?

The Code (100):

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>

推荐答案

不,不可能只使用一个 Select 器.:first-of-type伪类 Select 其type(divp等)中的第一个元素.使用具有该伪类的类 Select 器(或类型 Select 器)意味着如果元素具有给定类(或属于给定类型)and是其sibling 项中的第一个类型,则 Select 该元素.

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

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

有关解决方法的说明和插图分别提供了herehere.

Css相关问答推荐

如何在没有额外间隔的情况下使用Angular Metal chckbox?

为什么我的Angular material css文件不工作?

在carousel组件上应用css转换时出现问题

显示Reaction组件上的问题.使用FlexBox时的意外大小

靴子,为什么我不能让任何东西正确地排好队?

如何使2个元素的宽度相同?

使用 Vuetify 的 sass 变量时出错

React MUI 从 CSS 伪元素中删除内容

:is() 伪类是否支持相邻sibling 表达式中第二个元素的组合器?

如何按列垂直对齐项目,但不在列内水平对齐

Tailwind css break-word 在输入字段中不起作用

条件宽度和省略号不适用于样式化组件 - React.js

在 css Select 器中匹配 unicode char

在样式化组件中使图像重叠

BEM 块、命名和嵌套

在整个 DIV 周围添加 CSS 框阴影

如何始终在浏览器中显示垂直滚动条?

如何填充 100% 的剩余高度?

通过javascript删除或禁用浏览器的焦点边框

你如何在 SASS 中定义属性 Select 器?