一,选择器

  :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. [转帖]利用hydra(九头蛇)暴力破解内网windows登录密码

    利用hydra(九头蛇)暴力破解内网windows登录密码 https://blog.csdn.net/weixin_37361758/article/details/77939070 尝试了下 能够 ...

  2. 在linux上安装spark详细步骤

    在linux上安装spark ,前提要部署了hadoop,并且安装了scala. 提君博客原创 对应版本 >>提君博客原创  http://www.cnblogs.com/tijun/   ...

  3. docker 操作镜像的基本操作

    以安装mysql为例 1.拉取镜像 docker pull mysql 错误的启动 [root@localhost ~]# docker run --name mysql01 -d mysql 42f ...

  4. Alertmanager 安装(k8s报警)

    一.下载Alertmanager https://prometheus.io/download/ wget https://github.com/prometheus/alertmanager/rel ...

  5. 在ASP.NET程序中用程序动态向<head>便签里添加<meta>标签

    在使用ASP.NET框架开发: 若要在Html网页中加入<meta>设置,但想通过程序动态加入: 1.如果是ASP.NET4.0以前版本: 使用HtmlMeta类加入<meta> ...

  6. Lodop删除语句Deleted只能内嵌设计维护可用

    有些人想用类似如下的语句删除打印项,或判断后把不需要的打印项删除,这种删除语句只能在打印设计或打印维护内嵌的时候使用,打印预览内嵌也不能使用.LODOP.SET_PRINT_STYLEA(2,'Del ...

  7. User Authentication with Angular and ASP.NET Core

    User authentication is a fundamental part of any meaningful application. Unfortunately, implementing ...

  8. hdu 4578 Transformation 线段树多种操作裸题

    自己写了一个带结构体的WA了7.8次 但是测了几组小数据都对..感觉问题应该出在模运算那里.写完这波题解去对拍一下. 以后线段树绝不写struct!一般的struct都带上l,r 但是一条线段的长度确 ...

  9. c++ 动态生成string类型的数组

    定义一个字符串指针,将其初始化为空 char *a=NULL 然后输入输出 cin>>a cout<<a 编译无误,但执行会遇见错误 当为*a动态分配存储空间时,程序执行正常 ...

  10. 【bzoj1150】[CTSC2007]数据备份Backup 模拟费用流+链表+堆

    题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游戏 ...