css选择class中的第一个怎么选？使用first-of-type？

tanglijun 发布于2019-08-30 15:55 / 2357人阅读

摘要：找到结构里面的所有的标签记作如果最后一个元素的为，把字体颜色改为

Dom结构


    我是span
    我是h1
    我是h1
    我是h1
    我是h1
    我是h1

1.指定标签

h1:first-of-type {
    color: red;
    // #test底下所有的h1找出来，其中第一个h1的字体颜色改为red；
}

2.指定class

.hha:first-of-type {
    color: blue;
    // 1.找到所有class为hha的标签，上面的Dom结构里有、;
    // 2.找到Dom结构所有h1、span（为了方便理解记作list1，list2）；
    // 3.如果list1、list2中第一个标签的class是hha，第一个class为hha的字体改为blue;
}

举一反三，下面的代码会把字体颜色改为orange？

.hha:last-of-type {
  color: orange;
}

以h1标签为例，所以第一步省略。
2.找到Dom结构里面的所有的h1标签（记作list3）

3.如果list3最后一个元素的class为hha，把字体颜色改为orange

云服务器 GPU云服务器怎么使用css css怎么使用选择包含class es6中的class

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117180.html

CSS 选择器

摘要：加号相连的两个选择器实现同级紧邻的元素选择的功能。我最好的朋友是米老鼠。样式紧挨的第一个同级元素是我最好的朋友是米老鼠。注意区分新增的属性选择器。是中新增的选择器，用于标示当前处于活动的锚标记。选择器的取反，这个很好理解。概览在 CSS 中，选择器用于选择需要添加样式的元素。 CSS 选择器非常丰富，现将 CSS 1 - 3 目前所有的选择器列举如下。选择器例子例子描述 ...

cnio 2019-08-28 18:18 评论0 收藏0
CSS 1-选择器

摘要：当两个规则的权值相同时，谁更具体用谁，也就是权值高的选择器作用的越具体优先级越高。 CSS选择器 1.id选择器 #id{ } ,#id选中元素2.类选择器 .class{ } ,.类名称选中元素3.标签选择器 div{ } ,标签名选中元素4.通配符选择器 { } ,选中所有元素5.组合选择器：分组选择器 E,F ，逗号隔开，同时选中E,F元素后代选择器 E F 空格隔开，选中E元素...

yhaolpz 2019-08-29 15:29 评论0 收藏0
我终于理解了伪类和伪元素

摘要：伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。除了上面这个本质区别以外，在中，伪类用单冒号表示而伪元素用双冒号表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间...

张迁 2019-08-30 14:05 评论0 收藏0
前端面试题-伪类和伪元素

摘要：四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前，只有火狐浏览器支持伪类，并在火狐浏览器中使用时需要添加前缀试验阶段。一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

Cristic 2019-08-30 14:09 评论0 收藏0
前端面试题-伪类和伪元素

摘要：四伪类列举状态伪类状态伪类是基于元素当前状态进行选择的。目前，只有火狐浏览器支持伪类，并在火狐浏览器中使用时需要添加前缀试验阶段。一、伪类和伪元素的引入 1. 规范说明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

entner 2019-08-01 18:41 评论0 收藏0