li:first-child{color:red} 2. last-child 选择列表中的最后一个标签 li:last-child{color:pink} 3.nth-child(n) 这里的n为数字,表示选择列表中的第n个标签 例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数,选中 2、4、6…… 个标签。 li:nth-child(2n){colo...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个标签,...
1 1、使用li标签创建一个列表,用于测试。 2、设置ul标签的class属性值为myway,用于设置样式。 3、在css标签内,通过class和“:first-child”选择器选中第一个li元素。 4、在css标签内,设置第一个li元素的内容颜色为红色,并且加粗显示。 5、在浏览器打开test.html文件,查看实现的效果。
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个标签,...
:first-child 方法/步骤 1 :first-child伪类元素选择器初识 2 新建一个HTML文档,包含两个<P>元素 3 选择P元素,且是其父元素的首个子元素,设置背景色 4 保存文件查看,显示效果 5 调换P和H1的位置,让P成为BODY的第一个子元素 6 保存后,再次查看消失效果 7 :first-child 使用总结:注意事项 理解first-...
在CSS世界中,first-child是一个重要的伪类选择器,它专门针对父元素的首个子元素进行样式设置。这个选择器在CSS2中被引入,它的作用类似于一个标记,帮助开发者精确地定位并操作文档结构中的第一个元素。举个例子,当你在HTML中看到如下结构:列表项一 列表项二 列表项三 列表项四 如果你想单独...
css::first-child设置首个子对象的样式 简介 css::first-child设置首个子对象的样式 工具/原料 Dreamweaver.exe 方法/步骤 1 新建HTML文件 2 创建p和ul ,li标签 3 预览效果如图 4 设置p元素的首个对象样式p:first-child { font-size:40px;} 5 预览效果如图 6 设置li元素的首个对象样式li:first-child {...
但是,但是,但是,我遇到这两个css选择器之后,刷新了我的看法,用css就能实现1到9张图不同张数排版不一样的问题。对就是first-child和nth-last-child 配合使用,一起走进这2个选择器吧! 1.first-child 第一个元素 当前选择元素第一个元素,例如:.box p:first-child 就是box下面的第一个p元素,注意这里如果你...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} ...
这是css3中新增的选择器,意思分别是最后一个子元素和第一个子元素,不过使用的时候,考虑一下随之引起的兼容性问题。