/*html*/
<div class="wrap">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div> /*css*/
.wrap{
display:table;
width: 200px;
}
.wrap span{
display:table-cell;
text-align:center;
}

nth-child(n)

//选择父元素下的第二个子元素,且为span
.wrap span:nth-child(2){
color:red;
}

但是如果子元素是混乱的,比如:

<div class="wrap">
<span>1</span>
<p>p</p>
<span>2</span>
<span>3</span>
<span>4</span>
</div>

nth-child(2)会选择第2个子元素,而且子元素必须是span,但是没找到(第二个子元素为p)

.wrap span:nth-child(3){
color:red;
}

nth-child(3)会选择第3个子元素,而且子元素必须是span

相关

  • nth-last-child(n) 从后往前找子元素

nth-of-type(n)

//选择父元素下的第二个span
.wrap span:nth-of-type(2){
color:red;
}

同样的html,nth-of-type(2) 会找到子元素的第2个span,不管有没有其他元素阻碍

相关

  • nth-last-of-type(n) 从后往前找子元素

only-child

<div class="wrap">
<span>1</span>
</div> /*css*/
.wrap span:only-child{
color:red;
}

只有父元素下有一个子元素时,才会生效

当有其他任意标签时,不生效

only-child应用比较少

相关

  • last-child 最后一个子元素

only-of-type

对比于only-child,only-of-type允许父元素下有其他类的子元素

// 这时会选中唯一的span元素
<div class="wrap">
<span>1</span>
<i>2</i>
</div>
.wrap span:only-of-type{
color:red;
}

相关

  • first-of-type 选中第一个指定子元素
  • last-of-type 选中最后一个指定子元素

css 选择器之子元素的更多相关文章

  1. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  2. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. jQuery选择器之子元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  4. jquery选择器之子元素

    HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> ...

  5. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. weex中css不能使用子元素选择器

    weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑

  7. 用css完成根据子元素不同书写样式

    我们需要达到的效果: 需要什么 1张图片的, 2张图片的, 3张图片的样式各不相同.可以使用js完成子元素的判断,但是这里我使用css来完成 核心知识点 使用css选择器完成子元素的判断 例子: 用c ...

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

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

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

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

随机推荐

  1. curl 执行post请求

    #curl -l -H "Content-type: application/json;charset=UTF-8" -H "X-Forwarded-For: 20.20 ...

  2. Linux修改SSH端口

    为什么要修改默认22端口 最近公司ssh全部换掉了默认的22端口,主要是为了防止被黑客大规模的扫描. 修改步骤 如果有需要请关闭防火墙(防止改错端口无法登陆) 修改sshd_config vim /e ...

  3. 2017.4.7 java异常处理总结

    目录 1.java异常处理的几种错误做法 2.异常处理示例 3.常用异常 4.异常类的继承关系 5.异常处理机制 6.Throw和Throws的区别 7.e.toString(), e.getCaus ...

  4. Excel 数据导入SQL XML 自动生成表头

    去出差的时候应客户要求要要将Excel 文件内的数据批量导入到数据库中,而且有各种不同种类的表格,如果每一个表格多对应一个数据表的话, 按照正常的方法应该是创建数据表,创建数据库中映射的数据模型,然后 ...

  5. 使用Fiddler作为简单的mockserver

    转载:  http://blog.csdn.net/xt0916020331/article/details/66544526 开发中经常遇到调试过程中对接系统接口无法联调或者后台未开发完成等情况.这 ...

  6. Android JNI/NDK开发教程

    JNI/NDK开发指南:http://blog.csdn.net/xyang81/article/details/41759643

  7. Git简明操作

    我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下 ...

  8. 【Excle数据透视表】如何在数据透视表中使用合并单元格标志

    先有数据透视表如下: 现在看着这个格式不舒服,我们希望调整成如下这种样式 步骤 单击数据透视表任意单元格→右键→数据透视表选项→布局和格式→合并且居中排列带标签的单元格 注意:如果数据透视表报表布局不 ...

  9. ASP.NET CORE RAZOR :将新字段添加到 Razor 页面

    https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/new-field 在本部分中,将使用 Entity Framew ...

  10. zabbix监控xenserver

    xenserver是基于redhat的,可以在zabbix官网下载对应的redhat zabbix安装包,直接安装即可 http://repo.zabbix.com/zabbix/3.0/rhel/5 ...