:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。 提示:和 :nth-of-type(1) 是一个意思。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 选择器 :first-of-type4.09.03.53.29.6 完整CSS选择器参考手册 CSS3 [attribute*=value] 选择器 ...
同样,div p:first-child也是同样的道理,:first-child会首先找第一个元素,然后发现第一个元素并不是p元素,所以也匹配不到 由此可见,我们在用:first-of-type时,其实只需要带上标签名就可以了,比如div p:first-of-type,根本不需要带上类名,如果不加标签名,那么会选择每种类型元素的第一个(示例1) 而用:first...
“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。 HTML代码: 我是一个块元素,...
在以上八个伪类选择器中,:first-child:last-child:nth-child(n):nth-last-child(n)在选择元素时,是按照其所有类型的兄弟元素开始计数,而:first-of-type:last-of-type:nth-of-type(n)nth-last-of-type(n),是按照其兄弟元素中,忽略除该元素以外的所有其他元素后开始计数的。 还没搞懂也没关系,你只需要记...
css选择器中:first-child与:first-of-type的区别 :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码: p:first-child h1:first-child span:first-child :first-child 然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?还是...
:first-of-type表示一组兄弟元素中其类型的第一个元素。 代码语言:javascript 代码运行次数:0 复制 Cloud Studio代码运行 .innerDiv p:first-of-type{color:orangered;} 上面表示将.innerDiv内的第一个元素为p的颜色设置为橘色。 代码语言:javascript
选择器 :first-of-type 4.0 9.0 3.5 3.2 9.6定义和用法 :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。提示:等同于 :nth-of-type(1)。语法 :first-of-type { css declarations; } :first-line :focus 分类导航 Copyright © 2021-2022 cankaoshouce.com 备案号:鄂ICP备...
首先,div .h2:first-of-type会查找.h2类名所对应的元素,这里是h1元素,所以:first-of-type会匹配第一个h1元素,也就是说,这里的class类名只是找到对应元素类型的作用。接下来结合起来看,第一个h1的元素的class并不是.h2,所以就无法匹配到。 同样,div p:first-child也是同样的道理,:first-child会首先找第一个...
1 应用代码。这个代码当中，它的父元素就是P。p:first-of-type{ background:#ff0000; } 2 完整style的流程。只要第一个这是第一个落。 有了颜色的变化。p:first-of-type{background:#ff0000;}这是标题这是第一个落。这是第二个。这是第三个。这是第四个。 3 CSS3 :last-of-type 选择器，这个选...
:first-of-type p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。 3 :last-of-type p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。 3 :only-of-type p:only-of-type 选择属于其父元素唯一的p 元素的每个 p 元素。 3 :nth-of-type(n) p:nth-of-type(2) 选择...