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 class="test">
<span>span</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="test">
<p>p1</p>
<span>span</span>
<p>p2</p>
<p>p3</p>
</div>
<div class="test">
<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;
}
css 选择其父元素下的某个元素的更多相关文章
- jquery层级原则器(匹配父元素下的子元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS选择器之伪类选择器(元素)
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- CSS选择器之通配符选择器和多元素选择器
1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器. 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...
- css控制父元素下的子元素自适应高度,且高度一致
css代码: .wrap{width:600px;margin:0 auto; overflow:hidden;} .left{background:#ccc;width:300px;float:le ...
- stylus选中hover元素的兄弟元素下的子元素
stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...
- css如何让父元素下的所有子元素高度相同
小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...
- CSS 中的伪类和伪元素
伪类(Pseudo classes) 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和 class 有些类似, ...
- 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法
转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素 原生的 ...
随机推荐
- [转帖]利用hydra(九头蛇)暴力破解内网windows登录密码
利用hydra(九头蛇)暴力破解内网windows登录密码 https://blog.csdn.net/weixin_37361758/article/details/77939070 尝试了下 能够 ...
- 在linux上安装spark详细步骤
在linux上安装spark ,前提要部署了hadoop,并且安装了scala. 提君博客原创 对应版本 >>提君博客原创 http://www.cnblogs.com/tijun/ ...
- docker 操作镜像的基本操作
以安装mysql为例 1.拉取镜像 docker pull mysql 错误的启动 [root@localhost ~]# docker run --name mysql01 -d mysql 42f ...
- Alertmanager 安装(k8s报警)
一.下载Alertmanager https://prometheus.io/download/ wget https://github.com/prometheus/alertmanager/rel ...
- 在ASP.NET程序中用程序动态向<head>便签里添加<meta>标签
在使用ASP.NET框架开发: 若要在Html网页中加入<meta>设置,但想通过程序动态加入: 1.如果是ASP.NET4.0以前版本: 使用HtmlMeta类加入<meta> ...
- Lodop删除语句Deleted只能内嵌设计维护可用
有些人想用类似如下的语句删除打印项,或判断后把不需要的打印项删除,这种删除语句只能在打印设计或打印维护内嵌的时候使用,打印预览内嵌也不能使用.LODOP.SET_PRINT_STYLEA(2,'Del ...
- User Authentication with Angular and ASP.NET Core
User authentication is a fundamental part of any meaningful application. Unfortunately, implementing ...
- hdu 4578 Transformation 线段树多种操作裸题
自己写了一个带结构体的WA了7.8次 但是测了几组小数据都对..感觉问题应该出在模运算那里.写完这波题解去对拍一下. 以后线段树绝不写struct!一般的struct都带上l,r 但是一条线段的长度确 ...
- c++ 动态生成string类型的数组
定义一个字符串指针,将其初始化为空 char *a=NULL 然后输入输出 cin>>a cout<<a 编译无误,但执行会遇见错误 当为*a动态分配存储空间时,程序执行正常 ...
- 【bzoj1150】[CTSC2007]数据备份Backup 模拟费用流+链表+堆
题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游戏 ...