:only-child

当元素是唯一的子元素，被选择。

HTML代码：

<body>

<div class="x">

<div>第一个DIV</div>

<div>第一个DIV</div>

<p>第一个P</p>

</div>

</body>

效果图：

CSS代码：

<style>

div:only-child{

    background-color:red;

}

</style>

因为div是body元素的唯一子元素，所以整个DIV都会变红。

演示图：

CSS代码：

<style>

p:only-child{

    background-color:red;

}

</style>

因为P元素不是div元素的唯一元素，所以P的背景颜色不会变红。

演示图：

：only-of-type

选择特定的，唯一类型的子元素。

HTML代码：

<body>

<div id="main" class="x">

<div id="a">第一个DIV</div>

<div id="b">第一个DIV</div>

<p>第一个P</p>

</div>

</body>

CSS代码：

<style>

div:only-of-type{

    background-color:red;

}

</style>

此时选择的div，是id为main的div，它是元素body的唯一类型（div）的元素，所以整个div会变红。

演示图：

而当把CSS代码修改成下面的代码，结果就会不同。

CSS代码：

<style>

.x div:only-of-type{

    background-color:red;

}

</style>

此时选择的div，是id为a和b的div，因为不是唯一，所以背景颜色不会变红。

演示图：

如果把CSS代码中的div，改成p后，p的背景颜色会变红，因为p是div里唯一类型的元素。

CSS代码：

<style>

p:only-of-type{

    background-color:red;

}

</style>

演示图：

:only-child和:only-of-type选择器的比较的更多相关文章

  1. 《CSS3实战》读书笔记 第三章：选择器：样式实现的标记

    第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...

  2. jquery1.9学习笔记 之层级选择器(一)

    子选择器(“parent > child”) 描述:选择所有父元素的直系子元素. 例子: <!doctype html> <html lang='zh'> <hea ...

  3. css继承样式怎么控制?用选择器

    css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...

  4. 揭开jQuery的面纱－jQuery选择器简介(二）

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 “$”是选择器不可缺少的部 ...

  5. CSS的五种基本选择器

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/co ...

  6. 4_jquery

    官网:www.jquery.com 兼容: 1.jquery-3.1.0.js :form.attr("checked","false")无效 2.firefo ...

  7. jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简 ...

  8. sizzle分析记录：词法分析器(tokenize)

    词法分析器(tokenize)? 词法分析器又称扫描器.词法分析是指将我们编写的文本代码流解析为一个一个的记号,分析得到的记号以供后续语法分析使用. sizzle引入了tokenize这个概念,意义? ...

  9. css学习--css基础

    学习慕课网笔记,课程:http://www.imooc.com/code/2024 1.css选择器 子选择器:parent>child 子选择器是指选择parent的范围内的第一个子元素.这里 ...

  10. javascript中的一些核心知识点以及需要注意的地方

    前言 近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来,也整理不出来 比如说我最近研究的Hybrid在线联调方案便过于依赖于业务,就算分享也不会有人读懂,若是抽一点来分享又意义不 ...

随机推荐

  1. 一起来学Spring Cloud | 第二章：服务注册和发现组件 (Eureka)

    本篇文章,很浅显的一步步讲解如何搭建一个能运行的springcloud项目(带所有操作截图).相信!看完本篇之后,你会觉得springcloud搭建如此简单~~~~ 一. Eureka简介: 1.1  ...

  2. MySQL 中基于 XA 实现的分布式事务

    1 XA协议 首先我们来简要看下分布式事务处理的XA规范可知XA规范中分布式事务有AP,RM,TM组成: 其中应用程序(Application Program ,简称AP):AP定义事务边界(定义事务 ...

  3. python接口自动化（十四）--session关联接口（详解）

    简介 上一篇cookie绕过验证码模拟登录博客园,但这只是第一步,一般登录后,还会有其它的操作,如发帖,评论等等,这时候如何保持会话呢?这里我以jenkins平台为例,给小伙伴们在沙场演练一下. se ...

  4. 4K视频在线看，网速跟不上怎么办？

    灿烂的阳光,温柔的风,二狗子一打开窗,觉得春天到了. “天气这么好,宅家玩电脑.”二狗子说着,点开了爱奇怪 App,最近一期的版本更新提到了支持 4K 视频播放,这是二狗子等了好久的功能. “今天我就 ...

  5. 『简单dp测试题解』

    这一次组织了一场\(dp\)的专项考试,出了好几道经典的简单\(dp\)套路题,特开一篇博客写一下题解. Tower(双向dp) Description 信大家都写过数字三角形问题,题目很简单求最大化 ...

  6. VS2017中使用组合项目_windows服务+winform管理_项目发布_测试服务器部署

    前言:作为一名C#开发人员,避免不了常和windows服务以及winform项目打交道,本人公司对服务的管理也是用到了这2个项目的组合方式进行:因为服务项目是无法直接安装到计算器中,需要使用命令借助微 ...

  7. Linux安装kubernetes

    使用KUBEADM安装KUBERNETES V1.14.0 一.环境准备      操作系统:Centos 7.5      一台或多台运⾏行行着下列列系统的机器器: ​ Ubuntu 16.04+ ...

  8. 19,CSS 滤镜

    1.Filter 属性介绍 2.Alpha 滤镜的使用 3.Blur 滤镜的使用 4.Filph.Filpv 滤镜 5.DropShadow 滤镜 6.Glow 滤镜 7.Gray ,Invert,X ...

  9. windows防火墙实验-命令行设置远程桌面连接以及禁止浏览器上网

    windows防火墙实验-设置远程桌面连接以及禁止浏览器上网 实验环境: 1.win2008远程桌面服务 2.win7-1 10.10.10.136 3.win7-2 10.10.10.153 实验步 ...

  10. Microsoft Edge浏览器下载文件乱码修复方法

    随着Windows10的普及,Microsoft Edge自带浏览器使用频率逐渐提升,在日常使用过程中我们会发现一个常规的问题是使用Edge进行日常文件下载的时候,N多情况下可能都是乱码,同样的下载链 ...