css怎么选择父元素下的某个元素?菜鸟教程网_选择器入门百科

css可以通过一些选择器来实现选择父元素下某个元素的效果。选择器有::first-child p:first-child(first第一个 child子元素)(找第一个子元素为p):last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p):first-of-type p:first-of-type(first

css怎么选择父元素下的某个元素?菜鸟教程网

css可以通过一些选择器来实现选择父元素下某个元素的效果。

css怎么选择父元素下的某个元素?菜鸟教程网_选择器入门百科

选择器有:

  • :first-child p:first-child(first第一个 child子元素)(找第一个子元素为p)

  • :last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p)

  • :first-of-type p:first-of-type(first第一个 type类型)(找第一个p)

  • :last-of-type p:last-of-type(last倒数 type类型)(找倒数第一个p)

  • :nth-child(n) p:nth-child(2)(2第二个 child子元素)(找第二个子元素为p)

  • :nth-last-child(n) p:nth-last-child(2)(last倒数 2第二个 child子元素)(找倒数第二个子元素为p)

  • :nth-of-type(n) p:nth-of-type(2)(2第二个 type类型)(找第二个p)

  • :nth-last-of-type(n) p:nth-last-of-type(2)(last倒数 2第二个 type类型)(找倒数第二个p)

  • :only-of-type span:only-of-type(only只有一个 type类型)(只有一个类型为span的)

  • :only-child   p:only-child(only只有一个 child子元素)(只有一个子元素,这里只有一个那么那一个也只能是p了)

效果

测试html:

<div>
    <span>span</span>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
<div>
    <p>p1</p>
    <span>span</span>
    <p>p2</p>
    <p>p3</p>
</div>
<div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <span>span</span>
</div>

p:first-child

/*属于其父元素的首个子元素的每个 <p> 元素*/
/*先找p元素 再找p的父元素下的第一个子元素为p的(first第一个 child子元素)(找第一个子元素为p)*/
p:first-child {
    background-color: yellow;
}

p:last-child

/*属于其父元素的最后一个子元素的 p 元素*/
/*先找p元素 再找p的父元素下的倒数第一个子元素为p的元素
(last倒数  child子元素)(找倒数第一个子元素为p)*/
p:last-child {
    background-color: yellow;
}

p:first-of-type

/*指定父元素的首个 p 元素*/
/*先找p元素 再找p的父元素下的第一个p元素(first第一个 type类型)(找第一个p)*/
p:first-of-type {
    background: #ff0000;
}

p:last-of-type

/*指定父元素的最后一个 p 元素*/
/*先找p元素 再找p的父元素下的倒数第一个p元素(last倒数 type类型)(找倒数第一个p)*/
p:last-of-type {
    background: #ff0000;
}

p:nth-child(2)

/*规定属于其父元素的第二个子元素的每个 p 的背景色:*/
/*先找p元素 再找p的父元素下的第二个子元素为p(2第二个 child子元素)(找第二个子元素为p)*/
p:nth-child(2) {
    background: #ff0000;
}

p:nth-last-child(2)

/*规定属于其父元素的第二个子元素的每个 p 元素,从最后一个子元素开始计数:*/
/*先找p元素 再找p的父元素下的倒数第二个子元素为p
(last倒数 2第二个 child子元素)(找倒数第二个子元素为p)*/
p:nth-last-child(2) {
    background: #ff0000;
}

p:nth-of-type(2)

/*规定属于其父元素的第二个 p 元素的每个 p:*/
/*先找p元素 再找p的父元素下的第二个p元素(2第二个 type类型)(找第二个p)*/
p:nth-of-type(2) {
    background: #ff0000;
}

p:nth-last-of-type(2)

/*规定属于其父元素的第二个 p 元素的每个 p,从最后一个子元素开始计数:*/
/*先找p元素 再找p的父元素下的倒数第二个p元素(last倒数 2第二个 type类型)(找倒数第二个p)*/
p:nth-last-of-type(2) {
    background: #ff0000;
}

span:only-of-type

/*指定属于父元素的特定类型的唯一子元素的每个 p 元素*/
/*先找span 再找span的父元素下只有一个类型为span的元素
(only只有一个 type类型)(只有一个类型为span的)*/
span:only-of-type {
    background: #ff0000;
}

p:only-child

/*规定属于其父元素的唯一子元素的每个 p 元素:*/
/*先找p 再找p的父元素下只有一个子元素
(only只有一个 child子元素)(只有一个子元素,这是只有一个那么那一个也只能是p了)*/
p:only-child {
    background: #ff0000;
}
海计划公众号
(0)
上一篇 2020/03/20 23:49
下一篇 2020/03/20 23:49

您可能感兴趣的内容

  • tether攻略教程_一个可用于创建下拉菜单、提示、弹出式菜单、页面引导的 JavaScript 定位引擎

    tether攻略教程 官方网址:http://tether.io/docs/welcome GitHub:https://github.com/HubSpot/tether 简介描…

    2020/03/06
  • 前端能力和后端能力入门指南_前端入门基础教程

    常常有类比说:人是有操作系统的。譬如我们需要构建自己的操作系统,我们都需要不断升级自己的操作系统 等等… …我很认同这个类比。其实更简单一些说,人就如同一个程序,如果这个系统很烂,体验很差。那他做出来的事情,输出出来的东西,就是一团乱麻,没什么实际价值。其实我们每个人既是一个系统,同时我们自己又是对自己编程的程序员。包括我自己曾经甚至现在也是一套“很

    2020/04/03
  • 提升工作效率的Chrome插件推荐入门指南_插件小白入门

    推荐几个我觉得非常不错的 Chrome 插件,都是我非常常用的。PostmanPostman 是一个很强大的 API调试、Http请求的工具,当你还准备拿着记事本傻傻的去写 Form 表单的时候,你来试试 Postman,你会震惊到的。OctotreeOctotree 可以让我们在 Github 上浏览代码更加方便和优雅。OneTab很多时候,我们打开了很多

    2020/03/30
  • 反爬经验与理论基础入门基础教程_爬虫指南教程

    一、反爬体系要做什么完整的反爬体系有三大部分工作要做:感知识别、策略分析、监控封禁。(一)感知识别:数据支撑:爬虫指纹、设备指纹、风险UA、IP库等,不同端指纹的mapping等。数据感知,什么人,通过什么方式,用什么爬虫,在什么时间,爬取了我们什么内容。(二)策略分析:事前策略:通过技术手段,在源头使攻击者无法爬取。事后策略:指感知到有爬虫事件后,采取的封

    2020/04/03
  • 网页设计十大流行趋势基础入门_网页入门教程

    1、个性化排版设计最近看到越来越多的网络设计尝试个性化的风格,其中比较突出的一点是个性化字体的增多:用自己独特设计的字体代替标准印刷体,让设计更加独特。让字体在体现个性的同时保留专业印刷风格。2、扁平化设计“借壳”设计(skeuomorphism)指模仿现实事物尽可能把手机元素(如图表、背壳等)设计得更加具体、拟物。而“扁平化”的极简主义则是和“拟物性”相背

    2020/03/26
  • 17 款可视化工具,让你的数据更美观指南教程_数据小白攻略

    想让数据变得更好看?不必成为经验丰富的数据科学家,也不必成为平面设计师。有一些能让数据从简单的表格变成多种多样的图形,地图甚至词“云”。并不是所有的工具都适合你,但这些工具确实很有用。希望你不仅能从中学到新的技能和极具创新的工具,更能从中结合你自己的业务有新的发现。1. Infogr.am在Infogr.am网站中,你可以使用30多种图形和6种主题创建互动和

    2020/03/29
  • 最全 HTTP 安全响应头设置指南使用说明_安全菜鸟教程

    销售“安全记分卡”的公司正在崛起,并已开始成为企业销售的一个因素。我从客户那里了解到,他们对从评级低的供应商那里的采购很不放心,至少有案例表明,他们依据最初的评级改变了采购决策。我调查了这些评级公司是如何计算公司安全性得分的,结果发现他们组合使用了 HTTP 安全报头和 IP 信誉。IP 信誉基于的是黑名单和垃圾邮件列表,再加上公共 IP 所有权数据。只要你

    2020/03/26
  • web安全测试必须注意的五个方面 使用帮助_测试入门指南

    随着互联网的飞速发展,web应用在软件开发中所扮演的角色变得越来越重要,同时,web应用遭受着格外多的安全攻击,其原因在于,现在的网站以及在网站上运行的应用在某种意义上来说,它是所有公司或者组织的虚拟正门,所以比较容易遭受到攻击,存在安全隐患。今天主要给大家分享下有关安全测试的一些知识点以及注意事项。一、安全测试的验证点一个系统的安全验证点包括上传功能、注册

    2020/03/29
  • 程序员接单平台入门基础教程程序员接私活的网站整理_私活小白入门

    国内程序员接活的平台其实很多,这篇文章主要是在网上整理了一些国内程序员接接私活的网站,希望对大家有所帮助。程序员客栈近23万优秀开发者 , 您的专属云端开发团队,程序员客栈是领先的程序员自由工作平台,未来互联网企业用人方式。提供优秀程序员为您进行网站建设制作、测试运维服务、人工智能AI、大数据区块链、软件开发等优质服务。 程序员客栈的优势在于:网站:htt

    2020/04/03
  • Web前端安全同样不可忽视,编写前端代码时保持安全意识使用帮助_安全攻略教程

    前言随着网络的快速普及,网络安全问题的受害者不再只是政府、企业等集体,每一个接触网络的普通人都有可能成为网络攻击的受害者。随着网络的普及,黑客进行网络攻击的手段越来也多,越来越复杂。以网站的攻击为例,据国家计算机网络应急技术处理协调中心的统计,一年中五个政府网站里就会有一个被入侵,而且入侵的数量每年都在以两倍多的速度增加。网络攻击的数量增加,除了攻击者的数量

    2020/04/06
  • h5本地预览上传的图片或视频菜鸟教程下载_图片指南攻略

    通过 中的change事件 拿到的file不能直接在本地预览选择的图片或者视频,可以通过以下两种方式预览本地图片,不用上传到服务器就可以本地预览。createObjectURL这种方式生成的文件地址可以预览图片和视频
    <h

    2020/03/29
  • consolidate.js入门基础教程_一个Node.js 模板引擎的集合

    consolidate.js入门基础教程 GitHub:https://github.com/tj/consolidate.js 简介描述:一个Node.js 模板引擎的集合 co…

    2020/03/06
  • javascript怎样调试代码?使用帮助_调试小白攻略

    javascript怎样调试代码?使用帮助 查找编程代码中的错误被称为代码调试。调试并不简单。但幸运地是,所有现代浏览器都有内置的调试器。内置的调试器可打开或关闭,强制将错误报告给…

    2020/03/20
  • stylis.js入门基础知识_轻量级css预处理器

    stylis.js入门基础知识 官方网址:https://stylis.js.org GitHub:https://github.com/thysultan/stylis.js 简…

    2020/03/07
  • InfoQ小白知识一个实践驱动的社区资讯站点,

    InfoQ菜鸟攻略 官方网址:http://www.infoq.com/ 简介描述:一个实践驱动的社区资讯站点, InfoQ – 促进软件开发领域知识与创新的传播,是一…

    2020/03/06
  • 微信活码技术如何解决微信个人号被动加好友上限加好友异常(微信群100人限制)小白教程_微信使用指南

    微信群营销已经成为主流的营销方式,我们都知道微信群未满100人之前可以分享群二维码,让我们的粉丝通过扫码进群,但是人数超过100后,发出的二维码就失效了,无法再次扫码进群,因此,很多人会有微信群满100人怎么再加人,今天给大家介绍下活码技术。传统的解决方式可能是,重新建一个群,然后生成一个新的群二维码,分享宣传出去,这样做可以解决,但是重新分享新的群二维码势

    2020/03/24