E:first-child 选择器 :E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器中的 第一个 E 类型标签 子元素 ; 代码语言:javascript 复制 ul li:first-child{/* 结构伪类选择器 选择 ul 父容器下的 第一个 li 子元素 */background-color:aqua;} E:last-child 选择器 :该选择器 选择 匹配的父容器 ...
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school 嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解: 误解一:认为E:first-child选中E元素的第一个子元素。 误解二:认为E:first-child选中E元素的父元素的第一个E元素。 你是不是也曾这样理解这个选...
first-child选择器在CSS3中提供了一种简单而强大的方式来控制父元素中的第一个子元素的样式。它不仅可以用于列表、表格等常见结构,还可以应用于任何需要对第一个子元素进行特殊处理的场景。通过合理使用first-child,我们可以使网页的设计更加精细和专业,同时也提高了代码的可读性和维护性。 在实际应用中,开发者和设计...
“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;} 示例演示 在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博...
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有什么区别呢?还是...
特别注意,选择的是选中对象在父元素中的第一个元素 2、基础效果演示 源代码 <!DOCTYPE html> CSS伪类选择器 .div{ width: 100px; margin: 10px; } /*选中元素的第一个元素*/ .div:first-child{ color: red; } /*选中元素的最后个元素*/ .div:last-child{ color: blue; } /*选中元素的第...
Vue进阶(幺幺捌):CSS3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type,(文章目录)1.first-child(IE7兼容)、last-child(IE8不兼容)html:列表列表项目1列表项目2列表项目3
css+html 代码编辑器：zend studio 10.0 方法/步骤 1 新建一个html文件，命名为test.html，用于讲解css如何使用:first-child选择器设置元素的样式。2 在test.html文件内，使用li标签创建一个列表，用于测试。3 在test.html文件内，设置ul标签的class属性值为myway，用于设置样式。4 在css标签内，通过class和“:...
:first-child 单独使用这个选择器不带任何前缀,选择的是作为 “某个元素” 的 “第一个子元素” 的元素 ,某个元素是文档里的任意元素(即所有元素),第一个子元素可以是任意的元素,要想明白这个子元素,很好的一个方式是使用jquery,在浏览器控制台使用 $(":last-child") 查看选择出来的元素就可以一目了然。
在CSS选择器中，有两个关键的区别选择器：`:first-child`和`:first-of-type`。`:first-child`选择的是一个元素作为其父元素的第一个子元素，关注的是结构上的顺序。例如，`p:first-child`匹配的是第一个``元素，因为它是其父元素``的第一个子元素。然而，`:first-of-type`则更进一步，它...