:only-child和:only-of-type选择器的比较
: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选择器的比较的更多相关文章
- 《CSS3实战》读书笔记 第三章：选择器：样式实现的标记
第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...
- jquery1.9学习笔记 之层级选择器(一)
子选择器(“parent > child”) 描述:选择所有父元素的直系子元素. 例子: <!doctype html> <html lang='zh'> <hea ...
- css继承样式怎么控制?用选择器
css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...
- 揭开jQuery的面纱－jQuery选择器简介(二）
选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 “$”是选择器不可缺少的部 ...
- CSS的五种基本选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/co ...
- 4_jquery
官网:www.jquery.com 兼容: 1.jquery-3.1.0.js :form.attr("checked","false")无效 2.firefo ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简 ...
- sizzle分析记录：词法分析器(tokenize)
词法分析器(tokenize)? 词法分析器又称扫描器.词法分析是指将我们编写的文本代码流解析为一个一个的记号,分析得到的记号以供后续语法分析使用. sizzle引入了tokenize这个概念,意义? ...
- css学习--css基础
学习慕课网笔记,课程:http://www.imooc.com/code/2024 1.css选择器 子选择器:parent>child 子选择器是指选择parent的范围内的第一个子元素.这里 ...
- javascript中的一些核心知识点以及需要注意的地方
前言 近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来,也整理不出来 比如说我最近研究的Hybrid在线联调方案便过于依赖于业务,就算分享也不会有人读懂,若是抽一点来分享又意义不 ...
随机推荐
- Redis in .NET Core 入门：(4) LIST和SET
第1篇:https://www.cnblogs.com/cgzl/p/10294175.html 第2篇 String:https://www.cnblogs.com/cgzl/p/10297565. ...
- TensorFlow从1到2（五）图片内容识别和自然语言语义识别
Keras内置的预定义模型 上一节我们讲过了完整的保存模型及其训练完成的参数. Keras中使用这种方式,预置了多个著名的成熟神经网络模型.当然,这实际是Keras的功劳,并不适合算在TensorFl ...
- itest 开源测试管理项目中封装的下拉列表小组件：实现下拉列表使用者前后端0行代码
导读: 主要从4个方面来阐述,1:背景:2:思路:3:代码实现:4:使用 一:封装背景 像easy ui 之类的纯前端组件,也有下拉列表组件,但是使用的时候,每个下拉列表,要配一个URL ...
- 人生苦短，我用 Python
从2015开始国内就开始慢慢接触Python了,从16年开始Python就已经在国内的热度更高了,目前也可以算的上"全民Python"了.众所周知小学生的教材里面已经有Python ...
- vue 设计一个倒计时秒杀的组件
简介: 倒计时秒杀组件在电商网站中层出不穷 不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路:1.时间不能是本地客户端的时间 必须是服务器的时间这里用一个settimeout ...
- SQL过滤字符后手工注入漏洞测试(第1题)
https://www.mozhe.cn/bug/detail/a1diUUZsa3ByMkgrZnpjcWZOYVEyUT09bW96aGUmozhe 分析题目,属于时间盲注,这种情况,通常使用sq ...
- Kali Linux 渗透测试手册（1.1）安装虚拟机
翻译来自:掣雷小组 成员信息: thr0cyte, Gr33k, 花花, 小丑, R1ght0us, 7089bAt, 一．配置KALI Linux和渗透测试环境 在这一章,我们将覆盖以下内容: 在W ...
- 以Windows服务方式运行.NET Core程序
在之前一篇博客<以Windows服务方式运行ASP.NET Core程序>中我讲述了如何把ASP.NET Core程序作为Windows服务运行的方法,而今,我们又遇到了新的问题,那就是: ...
- Tampermonkey还你一个干净整洁的上网体验
作为一个前端开发,平时难免要经常浏览一些博客.技术网站,学习新的技术或者寻找解决方案,可能更多是ctrl+c和ctrl+v(^_^|||),但是目前很多网站的布局以及广告对于我们阅读文章造成了很多的障 ...
- 解决Linux启动redis时出现提示权限不够问题
如果权限不够请使用一条命令 chmod 777 操作 参考:https://blog.csdn.net/zczzsq/article/details/8162339