js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器
一、总结
一句话总结:三种和first、last等有关的选择器。
1、:first和:first-child和:first-of-type的区别?
:first:单选。:first-child:多选(父元素第一个)。:first-of-type:多选(同类型第一个);
:first-of-type”是选择父元素下某个元素类型的第1个子元素(区分元素类型);“:first-child”是选择父元素下的第1个子元素(不区分元素类型)
二、-of-type型子元素伪类选择器
1、相关知识
子元素伪类选择器
- :first-child选择父元素的第1个子元素
- :last-child选择父元素的最后1个子元素
- :nth-child(n)选择父元素下的第n个元素或奇偶元素,n的值为"整数|odd|vevn
- :only-child选择父元素中唯一的子元素(该父元素只有一个子元素)
- :first-of-type选择同元素类型的第1个同级兄弟元素
- :last-of-type选择同元素类型的最后1个同级兄弟元素
- :nth-of-type选择同元素类型的第n个同级兄弟元素,n的值可以是"整数|odd|even"
- :onlt-of-type匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script src="jquery-3.1.1.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<span>span1</span>
<span>span2</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<script>
// $('li:nth-child(3n)').css("background-color", "red")
// $('h1:first-child').css("background-color", "red") //选择择不到任何元素,p、span并不是div的第1个子元素
// $('p:first-child').css("background-color", "blue")
// $('span:first-child').css("background-color", "blue") //“:first-of-type”是选择父元素下某个元素类型的第1个子元素(区分元素类型);“:first-child”是选择父元素下的第1个子元素(不区分元素类型)
$('h1:first-of-type').css("background-color", "red")
$('p:first-of-type').css("background-color", "red")
$('span:first-of-type').css("background-color", "red")
</script>
</body>
</html>
js进阶 10-9 -of-type型子元素伪类选择器的更多相关文章
- js 进阶 10 js选择器大全
js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- js进阶 11-7 jquery如何获取和改变元素的位置
js进阶 11-7 jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...
- js进阶 10-10 可见伪类选择器和内容伪类选择器的作用
js进阶 10-10 可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是 四个 包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...
- js进阶 10-7 简单的伪类选择器可以干什么
js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...
- js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
随机推荐
- 杭电1102 Constructing Roads
Constructing Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Android学习之图片压缩,压缩程度高且失真度小
曾经在做手机上传图片的时候.直接获取相机拍摄的原图上传,原图大小一般1~2M.因此上传一张都比較浪费资源,有些场景还须要图片多张上传,所以近期查看了好多前辈写的关于图片处理的资料.然后试着改了一个图片 ...
- Jquery+Ajax+Bootstrap Paginator实现分页的拼接
效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...
- debian 9 安装后需做的几件事
debian 9 安装后需做的几件事 安装环境:X86 >> Debian 9 Linux/GNU apt源更新 注意连上有线网络 刚安装好的debian系统中,/etc/apt/sour ...
- Altium Designer中距离的测量
Ctrl+M 清除测量标签:点击右下角的清除按键
- 【转】CentOS/RHEL/OracleLinux使用UDEV配置ASMDISK
转自:http://blog.csdn.net/staricqxyz/article/details/8332566 RHEL 5 / CentOS 5 / Oracle Linux 5 [root@ ...
- ajax日期參数格式问题
今天遇到ajax传输日期參数后台无法识别的问题,错误异常例如以下. 从异常中能够看出传输到后台的日期数据格式为Thu Aug 13 2015 19:45:20 GMT+0800 (中国标准时间),这样 ...
- 通过WPF中UserControl内的按钮点击关闭父窗体
原文:通过WPF中UserControl内的按钮点击关闭父窗体 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article ...
- VC/MFC中为程序定义全局快捷键
VC 2010-05-01 18:01:34 阅读287 评论0 字号:大中小 订阅 1.注册快捷键 在初始化函数,如OnInitDialog() 注册快捷键,代码如下: #define HotKey ...
- swift学习第十天:函数
函数的介绍 函数相当于OC中的方法 函数的格式如下 func 函数名(参数列表) -> 返回值类型 { 代码块 return 返回值 } func是关键字,多个参数列表之间可以用逗号(,)分隔, ...