文章地址 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. Node中流的概念

    在学习node的过程中,对于流的概念一直不是很理解,通过查阅一些资料,现在将自己对流的一些理解进行总结一下. 一.流的理解 首先我们必须知道什么是流,很多书中只是提到使用流读写文件怎么怎么方便,却不提 ...

  2. Vue.js组件间通信方式总结

    平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子 ...

  3. Java工程师修炼之路（校招总结）

    Java工程师修炼之路(校招总结) 前言 在下本是跨专业渣考研的985渣硕一枚,经历研究生两年的学习积累,有幸于2019秋季招聘中拿到几个公司的研发岗offer,包括百度,阿里,腾讯,今日头条,网易, ...

  4. 如何定义开发完成？（Definition of Done）

    最近在拜读郑晔的10x程序员工作法,收益良多,文中提出一个概念叫DoD(Definition of Done)给我的感触颇深.这让我联想到实际工作过程中,经常遇到的扯皮.争吵等各种场景,其实就和这个D ...

  5. cocos creator主程入门教程（四）—— 网络通信

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 前面已经介绍怎样加载资源.管理弹窗.开发一个网络游戏,难免要处理网络通信.有几点问题需要注意: 1.服务 ...

  6. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  7. 项目升级-oracle改版sql server问题点汇总

    目录 1.符号使用 1.1 :->@ 1.2 mod()->% 1.3 ||->+ 1.4 off等表别名 1.5 columnnum=1->top 1 1.6 minus-& ...

  8. Exp2后门原理与实践 20164312马孝涛

    实验内容 使用netcat获取主机操作Shell,cron启动 (0.5分) 使用socat获取主机操作Shell, 任务计划启动 (0.5分) 使用MSF meterpreter(或其他软件)生成可 ...

  9. Jvm启动，关闭及对应钩子

    很多时候应用服务启动或关闭会做一些预加载(比如缓存,定时任务启动等)或收尾处理工作(比如程序失败记录等) 1． 首先看下Spring框架服务启动加载操作实现,直接上代码 继承实现接口Applicati ...

  10. Flarum轻量级论坛的安装

    论坛作为互联网中的远古产物,经历了如QQ群.社区和贴吧等新兴社交工具的冲击,依然能够存在,肯定是有着不可替代的用处,像吾爱.远景等论坛依旧火热.一些博客主也喜欢自己搭建一个论坛作为用户聚集之地. 之前 ...