CSS:first-of-type选择器用于在一组元素中选择其类型的第一个元素。 例如,如果您有一组段落,则:first-of-type选择器将选择该组中的第一个段落。 此选择器通常与其他选择器(例如子选择器)结合使用来选择特定元素。 例如,以下代码将选择页面上第一个 div 元素中的第一段: div:first-child>p:first-of-type{...
div:first-child > p:first-of-type { /* CSS code */ } What is CSS First of ClassCSS selectors select the elements you want to style.The most basic selector is the element selector, which is used to select an element by its tag name. For example, the element selector p will ...
.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:la...
DOCTYPE html>Title/*4.id选择器 id是唯一的 选中指定的某个元素*/#id_1{height:50px;width:140px;background:lightpink;}测试通用元素匹配1测试通用元素匹配测试通用元素匹配2测试通用元素匹配3 效果 只有id=id_1的被选中设置属性 5.群组选择器 组员之间用逗号","隔开 <!DOCTYPE html>Title/*群组选择器 组...
这段代码,没有像我们期望中的标红.test元素(即第2个段落标签),如果没理解到上面提到的语法关键词意思,第一反应可能会产生“:first-of-type带class写法浏览器不能识别,失效,这是bug”的错误理解。 我们不能简单粗暴,理所当然的将上面的代码错误理解为“匹配父元素.box内第一个.test元素”,我们按上面提到关键词...
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.如果list...
首先,div .h2:first-of-type会查找.h2类名所对应的元素,这里是h1元素,所以:first-of-type会匹配第一个h1元素,也就是说,这里的class类名只是找到对应元素类型的作用。接下来结合起来看,第一个h1的元素的class并不是.h2,所以就无法匹配到。 同样,div p:first-child也是同样的道理,:first-child会首先找第一个...
CSS3 first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。
CSS3 first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。
下面就说说first-child与first-of-type的区别：first-child：父元素的第一个子元素且必须符合指定类型 first-of-type：父元素的符合指定类型的第一个子元素 当然，光看文字也是很难理解的，下面看看例子： 第1行 第2行 第3行 这种情况下，不管是p:first-of-type还是p:first-child，第1行都会被...