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 伪元素 ...
随机推荐
- 一文带你了解 Spring 5.0 WebFlux 应用场景
一.什么是 Spring WebFlux 下图截自 Spring Boot 官方网站: 结合上图,在了解 Spring WebFlux 之前,我们先来对比说说什么是 Spring MVC,这更有益我们 ...
- Tomcat 8.0的并发优化 - 优化server.xml的配置
目录 1 Tomcat的3种运行模式 1.1 BIO - 同步阻塞IO模式 1.2 NIO - 同步非阻塞IO模式 1.3 APR - 可移植运行时模式 2 Tomcat的并发配置(配置Connect ...
- Eclipse连接Hadoop集群及WordCount实践
声明:作者原创,转载注明出处. 作者:帅气陈吃苹果 一.环境准备 1.JDK安装与配置 2.Eclipse下载 下载解压即可,下载地址:https://pan.baidu.com/s/1i51UsVN ...
- .NETCore 下支持分表分库、读写分离的通用 Repository
首先声明这篇文章不是标题党,我说的这个类库是 FreeSql.Repository,它作为扩展库现实了通用仓储层功能,接口规范参考 abp vnext 定义,实现了基础的仓储层(CURD). 安装 d ...
- matplotlib种类
matplotlib模板: 1:线图 plot()单线段图 2:多个线图 subplot()Multiple axes (i.e. subplots) are created with the sub ...
- 用python复制图片、视频
图片复制 f_src = open('1.jpg','rb') content = f_src.read() f_copy = open('1-副本.jpg','wb') f_copy.write(c ...
- headfirst设计模式（9）—模板方法模式
前言 这一章的模板方法模式,个人感觉它是一个简单,并且实用的设计模式,先说说它的定义: 模板方法模式定义了一个算法的步骤,并允许子类别为一个或多个步骤提供其实践方式.让子类别在不改变算法架构的情况下, ...
- postgresql 添加uuid扩展
去年用EF Core做数据迁移到psql数据库的时候遇到了缺失uuid的错误,当时帅气的脸蛋突然懵逼了.现记录一下 以备参考. 环境:Centos7.2 psql Xshell Xshell连接C ...
- python3 文件操作练习 r+ w+ a+ 的理解
突然来一句:“慨然有经略四方之志” 文件操作三部曲:1.先用open打开 2.再写关闭 3.再回到中间写操作 为啥要刚打开就关闭 那是很容易望,所以先写上... 基本格式 f = open( ...
- spider 爬虫文件基本参数(3)
一 代码 # -*- coding: utf-8 -*- import scrapy class ZhihuSpider(scrapy.Spider): # 爬虫名字,名字唯一,允许自定义 name ...