一,选择器

  :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 选择其父元素下的某个元素的更多相关文章

  1. jquery层级原则器(匹配父元素下的子元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS选择器之伪类选择器(元素)

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  3. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器. 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

  4. css控制父元素下的子元素自适应高度,且高度一致

    css代码: .wrap{width:600px;margin:0 auto; overflow:hidden;} .left{background:#ccc;width:300px;float:le ...

  5. stylus选中hover元素的兄弟元素下的子元素

    stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...

  6. css如何让父元素下的所有子元素高度相同

    小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...

  7. CSS 中的伪类和伪元素

    伪类(Pseudo classes) 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和 class 有些类似, ...

  8. 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法

    转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...

  9. js和jquery获取父级元素、子级元素、兄弟元素的方法{转}

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素   原生的 ...

随机推荐

  1. Zookeeper的作用,在Hadoop及hbase中具体作用

    什么是Zookeeper,Zookeeper的作用是什么,在Hadoop及hbase中具体作用是什么 一.什么是Zookeeper ZooKeeper 顾名思义 动物园管理员,他是拿来管大象(Hado ...

  2. jenkins插件findbugs+pmd+checkstyle结合sonar与maven(java环境代码质量和代码规范管理)

    一.下载jdk并安装(最好jdk官网下载解压安装的) 二.下载maven并安装maven 三.安装jenkins及插件 安装checkstyle.pmd.findbugs.maven.sonar等相关 ...

  3. ERP系统的问题

    1.业务统计报表导出超时 2.库存统计相关接口查询容易导致慢查询,而且慢查询出现在主库上

  4. 用dbexpress连接sqlserver数据库

    SQLConnection1.Params.clearSQLConnection1.Params.Values['ServerName'] := '192.168.0.112'; SQLConnect ...

  5. eclipse 等号左边代码补全

    1: 2. 3.完成  “ctrl + shift + l” 代码补全成功

  6. 微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件

    微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件,这个插件名为 Web Activities,功能是跨 Windows 10 和 Microsoft Launcher ...

  7. HTTP 错误 500.21 - Internal Server Error 处理程序“BlockViewHandler”在其模块列表中有一个错误模块“ManagedPipelineHandler

    HTTP 错误 500.21 - Internal Server Error  处理程序“BlockViewHandler”在其模块列表中有一个错误模块“ManagedPipelineHandler ...

  8. Linux(Centos)下调整分区大小(以home和根分区为例)

      在安装新系统的时候,有时候没法预估或者说错误的划分了分区大小,常常会导致我们后面的操作出现极大地不方便,比如某个分区分的太小了,导致 软件安装的时候会报安装空间不够,这就很麻烦.在这里我就记录一下 ...

  9. Eclipse 安装Activiti插件(BPMN打开工具)

    在Eclipse的菜单中打开help -> install new software: 单击add: Name: Activiti BPMN 2.0 designer Location: htt ...

  10. HDU 1556-Color the ball-树状数组

    树状数组的成段更新. 首先要明白,insert函数的意思是更新某一点值,query函数的意思是从起点到某一点的和. 更新[a,b]段时,在a点插入一个1,在b+1点插入一个-1.这时,query(a) ...