这段代码,没有像我们期望中的标红.test元素(即第2个段落标签),如果没理解到上面提到的语法关键词意思,第一反应可能会产生“:first-of-type带class写法浏览器不能识别,失效,这是bug”的错误理解。 我们不能简单粗暴,理所当然的将上面的代码错误理解为“匹配父元素.box内第一个.test元素”,我们按上面提到关键词...
p:first-child选择的是第一个节点然后看这个节点是不是 p 元素,是的话生效。因此要生效,一定要保证要选择的元素前面没有兄弟节点,否则就用 div 包住。 p:first-of-type选择的是第一个 p 元素节点,这才是我默认理解的意思,因此使用这种方法也能达到选择first-child的效果,并且前面可以有节点。 p:nth-of-typ...
first-of-type:指的是父元素下,相同类型子元素中的第一个,上面的例子中因为 class 为 userinfo-item 的 div 元素是第一个 div 元素,所以生效了,此时如果前面有其他 div 元素,则样式还是不生效的; last-child 和 last-of-type 原理类似。 first-of-type mdn:https://developer.mozilla.org/zh-CN/docs/Web...
不幸的是,first-of-type选择器并没有引用类的第一次出现,而是引用标记类型,在本例中是section。因此,与类选择器结合使用时,不会在示例中选择任何内容。 如果你知道有多少个节,你可以使用不带类的section:nth-of-type(x) (参见下面的例子),否则唯一的解决方案就是给那个节分配一个单独的类,并在选择器中使用...
css中first-child、last-child不生效问题 css中first-child、last-child不生效查看引用的是否正确;使用li:first-of-type只选中为li的伪元素
“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。
要求不能改动dom结构(不能添加修改删除 标签/属性)的情况下实现期望并且要把class为xx 想象成近乎无限多的(不要避开not选择器 不要避开first选择器)
1 应用代码。这个代码当中，它的父元素就是P。p:first-of-type{ background:#ff0000; } 2 完整style的流程。只要第一个这是第一个落。 有了颜色的变化。p:first-of-type{background:#ff0000;}这是标题这是第一个落。这是第二个。这是第三个。这是第四个。 3 CSS3 :last-of-type 选择器，这个选...