jQuery子元素筛选选择器

最新推荐文章于 2020-05-30 10:01:08 发布

♕时光以北暮南城

最新推荐文章于 2020-05-30 10:01:08 发布

阅读量224

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_43742368/article/details/106318487

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery子元素筛选选择器</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../jquery/jq/jq5.3.1.js"></script>
<script>
$(document).ready(function(){
	$(".parent p:first-child").css("color","#F00");//选择parent下的s所有div的第一个p标签文字变颜色
	$(".parent p:last-child").css("border","1px solid #F00");//选择parent下的所有div的最后一个p标签加边框
	$(".parent p:only-child").css("font-size","28px");//parent下的div中只有一个子元素p标签文字字体改变
	$(".parent p:nth-child(2)").css("color","#0C0");//parent下的div第2个p标签文字颜色改变，选第几个括号数字就第几个
	$(".parent p:nth-last-child(2)").css("color","#00F");//parent下的div从后往前数第2个p标签文字颜色改变，选第几个括号数字就第几个
});
</script>
</head>
<body>
<div class="parent">
	<div class="box1">
    	<p>我是第一</p>
        <p>我是第一</p>
        <p>我是第一</p>
        <p>我是第一</p>
    </div>
    <div class="box2">
    	<p>我是第二</p>
    </div>
    <div class="box3">
    	<p>我是第三</p>
        <p>我是第三</p>
        <p>我是第三</p>
        <p>我是第三</p>
    </div>
</div>
</body>
</html>

在这里插入图片描述

♕时光以北暮南城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery子元素筛选选择器

<!DOCTYPE html><html lang="en"><head><title>jQuery子元素筛选选择器</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="../jquery/jq/jq5.3.1.js"></script><script>$(docum
复制链接

扫一扫