DOCTYPE html>Title/*去掉块与块之间的间隙*/*{margin:0;padding:0;}测试通用元素匹配测试通用元素匹配测试通用元素匹配测试通用元素匹配 效果都被 * 选中,去掉间隙。之前和之后 2.元素选择器 选择所有相同的元素 <!DOCTYPE html>Title/*2
“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。 HTML代码: 我是一个块元素...
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码: p:first-child h1:first-child span:first-child :first-child 然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?还是看那段代码: p:first-of-type h1:first-of-type ...
在CSS选择器中，有两个关键的区别选择器：`:first-child`和`:first-of-type`。`:first-child`选择的是一个元素作为其父元素的第一个子元素，关注的是结构上的顺序。例如，`p:first-child`匹配的是第一个``元素，因为它是其父元素``的第一个子元素。然而，`:first-of-type`则更进一步，它匹...
:first-child和:first-of-type是CSS中常用的伪类选择器,它们在选择元素时具有不同的行为和应用场景。理解这些区别有助于开发者在实际项目中选择合适的选择器来实现所需的样式效果。 :first-child:适用于需要选择父元素的第一个子元素的场景,但需要注意它必须是父元素的第一个子元素。:first-of-type:适用于需要选...
“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。
:first-of-type匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。 同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。
:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。 :first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。 同样类型的选择器 :last-chi...
first-child 是指父节点下的第一个元素,无论类型是什么 first-of-type 不一定是父节点下的第一个元素,但是是第一个指定类型的元素 例如: Javascript 是div:first-of-type,但是不是 div:first-child. 微信关注我哦 👍 我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei聊聊...
以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。 示例代码: <!DOCTYPE html>CSS 高级选择器使用* { padding: 0; margin: 0; } /*IE8不支持 IE9支持*/ li:nth-child(3n+1) { color: