文章地址 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的更多相关文章

  1. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

  2. h5与c3权威指南笔记--css3新属性选择器

    [att*=val] 选择所有att属性值中包含val的.只要包含val值,不论val值在属性值的前面还是中间还是后面~ <style> div[class*=div]{ color: r ...

  3. CSS3 结构性伪类选择器(1)

    1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...

  4. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  5. CSS3 结构性伪类选择器(2)

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

  6. H5与C3权威指南笔记--transition动画

    translation:过渡 举个栗子:transition: width 1s linear; transition有三个属性,分别是transition-property, transition- ...

  7. H5与C3权威指南笔记--box-shadow

    box-shadow 用于给盒子添加阴影效果.IE9+ 举个栗子:box-shadow: inset 5px 5px 5px red; inset可选,该值会让阴影出现在盒子内部. 第一个5px是阴影 ...

  8. css3结构性伪类选择器

  9. css3 结构性伪类选择器

    伪类 选择器 类型 说明 备注 E:first-line 伪元素选择器 选择匹配E元素内的第一行文本 E:first-letter 伪元素选择器 选择匹配E元素内的第一个字符 E:before 伪元素 ...

随机推荐

  1. 【Python实践-6】将不规范的英文名字,变为首字母大写,其他小写的规范名字

    #利用map()函数,把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字. def f1(s): s=s.capitalize() return s list1= ['adam', 'L ...

  2. go语言调度器源代码情景分析之四:函数调用栈

    本文是<go调度器源代码情景分析>系列 第一章 预备知识的第3小节. 什么是栈 栈是一种“后进先出”的数据结构,它相当于一个容器,当需要往容器里面添加元素时只能放在最上面的一个元素之上,需 ...

  3. 使用docker-compose 一键部署你的分布式调用链跟踪框架skywalking

    一旦你的程序docker化之后,你会遇到各种问题,比如原来采用的本地记日志的方式就不再方便了,虽然你可以挂载到宿主机,但你使用 --scale 的话,会导致 记录日志异常,所以最好的方式还是要做日志中 ...

  4. selinux学习

    一.基本概念 1.TE模型的安全上下文 所有的操作系统访问控制都基于主体.客体,以及与他们相关的访问控制属性. 在selinux中,访问控制属性叫做安全上下文.所有对象(文件.进程间通信通道.套接字. ...

  5. .net MVC +EF+VUE做回合制游戏(一)

    刚毕业的新人,工作的时候试过用.net 框架,但是我发现写的前端代码都非常多,要写很多很多的原生,然后最近在看vue.js觉得还不错,可以减少前端很多dom操作. 至于做的东西我是想做一个游戏,一个回 ...

  6. PoolEntry 参数讲解

    public abstract class PoolEntry<T, C> { private final String id; private final T route; //路由 p ...

  7. Activity简介

    声明周期 4种状态 running / paused / stopped / killed 声明周期 activity启动  --->onCreate() -->onStart()---& ...

  8. 产品经理之PRD详解

    文章大纲 一.PRD基础二.PRD要素讲解三.相关模板下载四.参考文章   一.PRD基础 1. PRD简介    PRD中文意思为:产品需求文档.PRD的主要使用对象有:开发.测试.项目经理.交互设 ...

  9. iOS屏幕适配 支持新手机 iPhone XR iPhone XS 超简单

    随着苹果爸爸发布了 超牛叉的iPhone iPhone X .iPhone XR.iPhone XS .iPhone XS Max.开发者的适配工作要开始了. 停,

  10. CVE-2019-0686|Microsoft Exchange特权提升漏洞补丁已发布

    Microsoft Exchange Server中存在一个特权提升漏洞.成功利用此漏洞的攻击者可以获得与Exchange服务器的任何其他用户相同的权限.这可能允许攻击者执行诸如访问其他用户的邮箱之类 ...