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 伪元素 ...
随机推荐
- Haskell学习-高阶函数
原文地址:Haskell学习-高阶函数 高阶函数(higher-order function)就是指可以操作函数的函数,即函数可以作为参数,也可以作为返回结果.有了这两个特性,haskell可以实现许 ...
- ASP.NET Core 实战：基于 Dapper 扩展你的数据访问方法
一.前言 在非静态页面的项目开发中,必定会涉及到对于数据库的访问,最开始呢,我们使用 Ado.Net,通过编写 SQL 帮助类帮我们实现对于数据库的快速访问,后来,ORM(Object Relatio ...
- C#判断字符串是不是英文或数字
利用正则. u4e00-u9fa5; //中文 ^[A-Za-z]+$ //英文字母 //截取冲击式样形状 public string SubStringForXingZhuang(strin ...
- 带着新人看java虚拟机06（多线程篇）
其实多线程还有很多的东西要说,我们慢慢来,可能会有一些东西没说到,那就没办法了,只能说尽量吧! 1.synchronized关键字 说到多线程肯定离不开这个关键字,为什么呢?因为多线程之间虽然有各自的 ...
- SSH免密登陆原理及实现
声明:作者原创,转载注明出处. 作者:帅气陈吃苹果 一.SSH简介 SSH(Secure Shell)是一种通信加密协议,加密算法包括:RSA.DSA等. RSA:非对称加密算法,其安全性基于极其困难 ...
- uni-app实现顶部导航栏显示按钮+搜索框
最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现 ...
- 《k8s-1.13版本源码分析》- Informer 机制
源码分析系列文章已经开源到github,地址如下: github:https://github.com/farmer-hutao/k8s-source-code-analysis gitbook:ht ...
- 8天入门docker系列 —— 第二天 通过一个aspnetcore程序加深对容器的理解
我们知道容器是一个打包了应用和相关依赖的盒子,那怎么去操控这个盒子呢? 这一篇我通过一个简单的aspnetcore程序来加深对盒子的理解,使用之前先 安装一下Docker的环境. 一:Docker的安 ...
- c#根据路径（url）下载图片
方法一:根据路径下载图片 1 /// <summary> /// 图片另存为 /// </summary> /// <param name="url" ...
- c# 多种方法调整屏幕亮度
Github: https://github.com/CHNMaxGor/AjustScreenBrightness 方法一: 使用网上常说的 Gdi32.dll 下的 SetDeviceGammaR ...