first-child和first-of-type
2024-08-30 01:24:59
我想实现的效果:将第一个article字体颜色设置为红色
1 |
<div? |
first-child
匹配某父元素的第一个子元素,可以说是结构上的第一个子元素。
用 first-child 不能实现想要的效果
1 |
article:first-child { |
原因:
使用:first-child伪类时一定要保证指定节点前面没有兄弟节点,在这里,把h1去掉;或者用一个div包住article,然后css:div article:first-child就可以了
first-of-type
匹配某父元素下相同类型子元素中的第一个
1 |
article:first-of-type { |
可以实现想要的效果
详解
1 |
<div> |
1、first-child
h1:first-child 匹配到的是h1元素,因为h1元素是div的第一个子元素;
p:first-child 匹配不到任何元素,因为在这里p是div的第二个子元素,而不是第一个;
article:first-child 匹配不到任何元素,因为在这里两个article元素都不是div的第一个子元素;
2、first-of-type
h1:first-of-type 匹配到的是h1元素,因为h1是div的所有类型为h1的子元素中的第一个;
p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个;
article:first-of-type 匹配到的是第三个子元素article。这里div有两个为article的子元素,匹配到的是它们中的第一个。
最新文章
- 平衡二叉树(AVL)c语言实现
- framebuffer应用编程实践
- 第43讲:Scala中类型变量Bounds代码实战及其在Spark中的应用源码解析
- 在 Perl 中使用 Getopt::Long 模块来接收用户命令行参数
- [Oracle] 中的Temporary tablespace的作用
- css 强制不换行
- getJSON的用法
- Angular 2 npm start 报错
- shiro能做什么,做j2ee时候要考虑什么
- cuda事件的使用
- 分享 android 源码
- JavaScript变量提升的本质
- python sorted函数多条件排序是怎么回事
- 自制stm32板子无法烧录程序的问题
- elasticsearch(3) 数据操作-更新
- [Reprinted] 使用Spring Data Redis操作Redis(一) 很全面
- 别致的语言GO(GO语言初涉)
- cin.get()函数使用例子
- doc转html
- [转载]angular通过$http与服务器通信
热门文章
- java 计算函数运行时间
- 注解ImportBeanDefinitionRegistrar ImportSelector
- [JSOI2019]节日庆典(Z-algorithm)
- java作业-----方法重载
- C++ sizeof 运算符
- linux重定向与管道符(一)
- shared zone ";SSL"; has no equal addresses: 011F0000 vs 03460000
- 关于使用MyEclipse自动生成Hibernate和Struts出现的jar不兼容的问题(antlr.collections.AST.getLine()I)
- IntelliJ的.iml文件及相关的Class Not Found 问题
- CSS-----样式表案例(沃顿商学院)之高级山寨版