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 伪元素 ...
随机推荐
- （翻译）W3C的Turtle文档
主要翻译如下页面,https://www.w3.org/TR/turtle/,对该页面中Turtle的内容部分进行翻译,希望对使用Turtle的朋友们有所帮助. 1 简介 2 Turtle语言 2.1 ...
- FreeSql.DbContext 第二个版本介绍
FreeSql.DbContext 实现类似 EFCore 使用方法,跟踪对象状态,最终通过 SaveChanges 方法提交事务. 目前是第二个初版,已实现状态跟踪保存(导航属性的跟踪暂时不支持). ...
- Android版数据结构与算法(二):基于数组的实现ArrayList源码彻底分析
版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 本片我们分析基础数组的实现--ArrayList,不会分析整个集合的继承体系,这不是本系列文章重点. 源码分析都是基于"安卓版" ...
- 微服务框架surging学习之路——序列化
1.对微服务的理解 之前看到在群里的朋友门都在讨论微服务,看到他们的讨论,我也有了一些自己的理解,所谓微服务就是系统里的每个服务都 可以自由组合.自由组合这个就很厉害了,这样一来,每个服务与服务之间基 ...
- Android拦截并获取WebView内部POST请求参数
起因: 有些时候自家APP中嵌入的H5页面并不是自家的.但是很多时候又想在H5不知情的情况下获取H5内部请求的参数,这应该怎么做到呢? 带着这个疑问,就有了这篇博客. 实现过程: 方案一: 最开始想到 ...
- Python爬虫 【requests】request for humans
安装 pip install requests 源码 git clone git://github.com/kennethreitz/requests.git 导入 import requests 发 ...
- 不为人知的网络编程(八)：从数据传输层深度解密HTTP
1.引言 在文章<理论联系实际:Wireshark抓包分析TCP 3次握手.4次挥手过程>中,我们学会了用wireshark来分析TCP的“三次握手,四次挥手”,非常好用.这就是传说中的锤 ...
- vs 2017 vs code
vs 2017 Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH ==== ...
- AI - TensorFlow - 示例02：影评文本分类
影评文本分类 文本分类(Text classification):https://www.tensorflow.org/tutorials/keras/basic_text_classificatio ...
- 【Keras篇】---Keras初始，两种模型构造方法，利用keras实现手写数字体识别
一.前述 Keras 适合快速体验 ,keras的设计是把大量内部运算都隐藏了,用户始终可以用theano或tensorflow的语句来写扩展功能并和keras结合使用. 二.安装 Pip insta ...