h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target
文章地址 https://www.cnblogs.com/sandraryan/
root：将样式绑定到根元素（html中的根元素是<html></html>）
举个栗子
:root{
background-color: yellow;
}
body{
background-color: lightgray;
}
.div1{
width: 200px;
height: 200px;
background-color: black;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
效果：除了div黑色，div所在行是浅灰色，其余部分黄色（：root）
（效果图太大 不放了）
所以：我以为，root的样式是<html>以内<body>以外部分的样式
：not 不选择某个元素中的某个部分
.box *:not(h1){
/*选择.box下所有元素中不是h1的 */
width: 50px;
height: 50px;
background-color:red;
}
<body>
<div class="box">
<div></div>
<div></div>
<h1></h1>
</div>
</body>
:empty 元素中内容空白时显示的样式
<style>
div:empty{
width: 100px;
height: 100px;
background-color: red;
}
</style> <body>
<div class="div1"></div>
</body>
div中没有任何东西，会使用这个样式，为div内部添加内容后，该样式失效
:target 对页面上target元素制定样式，指定的样式会在用户点击并成功跳转后显示
<style>
.div1{
height: 800px;
background-color: lightgray;
}
:target{
background-color: red;
}
</style>
</head>
<body>
<p><a href="#div1">click</a></p>
<p><a href="#div2">click</a></p>
<p><a href="#div3">click</a></p>
<div class="div1"></div>
//这个div用来拉长页面，让跳转效果更明显
<div id="div1">content</div>
<div id="div2">content</div>
<div id="div3">content</div>
</body>
//这个测试记得清缓存
h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target的更多相关文章
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
- h5与c3权威指南笔记--css3新属性选择器
[att*=val] 选择所有att属性值中包含val的.只要包含val值,不论val值在属性值的前面还是中间还是后面~ <style> div[class*=div]{ color: r ...
- CSS3 结构性伪类选择器（1）
1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- CSS3 结构性伪类选择器（2）
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
- H5与C3权威指南笔记--transition动画
translation:过渡 举个栗子:transition: width 1s linear; transition有三个属性,分别是transition-property, transition- ...
- H5与C3权威指南笔记--box-shadow
box-shadow 用于给盒子添加阴影效果.IE9+ 举个栗子:box-shadow: inset 5px 5px 5px red; inset可选,该值会让阴影出现在盒子内部. 第一个5px是阴影 ...
- css3结构性伪类选择器
- css3 结构性伪类选择器
伪类 选择器 类型 说明 备注 E:first-line 伪元素选择器 选择匹配E元素内的第一行文本 E:first-letter 伪元素选择器 选择匹配E元素内的第一个字符 E:before 伪元素 ...
随机推荐
- C++ : 内联函数和引用变量
一.内联函数 内联函数和普通函数的使用方法没有本质区别,我们来看一个例子,下面展示了内联函数的使用方法: #include <iostream> using namespace std; ...
- 【.NET异步编程系列1】：await&async语法糖让异步编程如鱼得水
前导 Asynchronous programming Model(APM)异步编程模型以BeginMethod(...) 和 EndMethod(...)结对出现. IAsyncResult Beg ...
- 《HelloGitHub》第 33 期
公告 欢迎 点击分享 自荐或发现的开源项目,也可安装 分享插件 更便捷地推荐有趣的开源项目. 小伙伴们,新的一年就要来了,今年的 Bug 改完了吗?先看看<HelloGitHub>最新一期 ...
- Flutter 实现原理及在马蜂窝的跨平台开发实践
一直以来,跨平台开发都是困扰移动客户端开发的难题. 在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如 WebView 和 React Native,来提升开发效率和 ...
- Android版数据结构与算法(三):基于链表的实现LinkedList源码彻底分析
版权声明:本文出自汪磊的博客,未经作者允许禁止转载. LinkedList 是一个双向链表.它可以被当作堆栈.队列或双端队列进行操作.LinkedList相对于ArrayList来说,添加,删除元素效 ...
- 如何手写JDK锁
手写JDK锁 需要三个步骤: 手写一个类MyLock,实现Lock接口 重写lock()方法 重写unlock()方法 代码: public class MyLock implements Lock ...
- 零基础学Python--------第3章 流程控制语句
第3章 流程控制语句 3.1程序的结构 计算机在解决某个具体问题时,主要有3种情况,分别是顺序执行所有的语句.选择执行部分语句和循环执行部分语句.程序设计中的3种基本结构为顺序结构.选择结构和循环结构 ...
- Kindle Windows版本 中文字体修改工具
近来想要用Windows看Kindle电子书,无奈Windows 版本的Kindle不能修改中文字体,非常难看.把Kindle拉到IDA PRO看了一下,发现Kindle Windows版本的中文字体 ...
- 云计算CRM软件厂商，你青睐哪家？
2018年CRM系统软件市场风起云涌,国内外厂商群雄逐鹿.2019年,新一轮的角逐已然展开.据Gartner报告称,CRM客户关系管理系统在2017年全球的销售额首次超越数据库管理系统((Databa ...
- SLA服务可用性怎么达到？
SLA:服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保障服务的性能和可用性,服务提供商与用户间定义的一种双方认可的协定.通常这个开销是驱动提供服 ...