一个只做百合的网站,有没有可以做翻译的网站,一般开发一个app要多少钱,个人博客网站的建设结构图jQuery选择器之子元素筛选选择器
子元素筛选选择器不常使用#xff0c;其筛选规则比起其它的选择器稍微要复杂点
子元素筛选选择器描述表#xff1a;
注意#xff1a;
:first只匹配一个单独的元素#xff0c;但是:first-child选择器可以匹配多个#xff1a;即为每个父…jQuery选择器之子元素筛选选择器
子元素筛选选择器不常使用其筛选规则比起其它的选择器稍微要复杂点
子元素筛选选择器描述表
注意
:first只匹配一个单独的元素但是:first-child选择器可以匹配多个即为每个父级元素匹配第一个子元素。这相当于:nth-child(1):last 只匹配一个单独的元素 :last-child 选择器可以匹配多个元素即为每个父级元素匹配最后一个子元素如果子元素只有一个的话:first-child与:last-child是同一个:only-child匹配某个元素是父元素中唯一的子元素就是说当前子元素是父元素中唯一的元素则匹配jQuery实现:nth-child(n)是严格来自CSS规范所以n值是“索引”也就是说从1开始计数:nth-child(index)从1开始的而eq(index)是从0开始的nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算后者从后往前计算
代码示例
!DOCTYPE html
html
headmeta http-equivContent-type contenttext/html; charsetutf-8 /title/titlelink relstylesheet hrefimooc.css typetext/cssscript srchttp://libs.baidu.com/jquery/1.9.1/jquery.js/script
/head
bodyh2子元素筛选选择器/h2h3:first-child、:last-child、:only-child/h3div classleft first-divdiv classdiva:first-child/aa第二个元素/aa:last-child/a/divdiv classdiva:first-child/a/divdiv classdiva:first-child/aa第二个元素/aa:last-child/a/div/divscript typetext/javascript//查找classfirst-div下的第一个a元素//针对所有父级下的第一个$(.first-div a:first-child).css(color, #CD00CD);/scriptscript typetext/javascript//查找classfirst-div下的最后一个a元素//针对所有父级下的最后一个//如果只有一个元素的话last也是第一个元素$(.first-div a:last-child).css(color, red);/scriptscript typetext/javascript//查找classfirst-div下的只有一个子元素的a元素$(.first-div a:only-child).css(color, blue);/scripth3:nth-child、:nth-last-child/h3div classleft last-divdiv classdiva:first-child/aa第二个元素/aa第三个元素/aa:last-child/a/divdiv classdiva:first-child/aa第二个元素/a/divdiv classdiva:first-child/aa第二个元素/aa第三个元素/aa:last-child/a/div/divscript typetext/javascript//查找classlast-div下的第二个a元素$(.last-div a:nth-child(2)).css(color, #CD00CD);/scriptscript typetext/javascript//查找classlast-div下的倒数第二个a元素$(.last-div a:nth-last-child(2)).css(color, red);/script/body/html
