html选择元素 :first :last基础用法教程二

 时间:2026-02-15 05:28:41

1、打开DW新建html文件,然后在bodu中建立如下代码:

<div>001</div>

<div>002</div>

<div>003</div>

<div>004</div>

<div>005</div>

html选择元素 :first :last基础用法教程二

2、浏览器中预览效果,现在是5个元素排列

html选择元素 :first :last基础用法教程二

3、然后对其添加效果显示,:first就是第一个的意思,div:first  含义便是选择第一个div,对其添加背景颜色-红色

$("div:first").css("background-color","red")

html选择元素 :first :last基础用法教程二

4、在浏览器中预览效果,可以看到第一个div中的背景颜色已经改为了自己设置的红色

html选择元素 :first :last基础用法教程二

5、:last表示最后一个的意思,div:last就是对最后一个div添加修饰效果

$("div:last").css("background-color","blue")

html选择元素 :first :last基础用法教程二

6、 在浏览器中预览效果,可以看到已经将最后一个div背景颜色换为了蓝色背景

html选择元素 :first :last基础用法教程二

7、以上是对于div标签使用:first和:last,在实例中可以选择其他重复元素,比如当出现大量h1 或li 等重复出现的标签时。

下一节我们学习下  :eq()如何选择。

  • 如何使用JS实现拖放图片到div中的功能
  • 洛克王国灵猴石获得方式
  • php+mysql怎样一次插入多条记录到数据库
  • 洛克王国怎么领取在线奖励
  • 洛克王国独角兽进化的紫藤快速获得
  • 热门搜索
    山东聊城旅游 我的世界怎么切换模式 自己怎么治疗灰指甲 如何清洗洗衣机 河北经贸大学经济管理学院怎么样 如何端正入党动机 tp-link路由器 如何培养孩子 如何搭配衣服 怎么打蝴蝶结视频