文章地址 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. 再谈腾讯云centos服务器不能登录的解决过程

    上篇文章谈到腾讯云centos服务器不能登录,通过查看监控信息,cpu使用过高,再腾讯云页面使用VNC方式直接登录,然后根据提示信息,关闭导致内存溢出的进程,从而解决问题. 1 问题再现 昨天刚解决了 ...

  2. Python函数小节

    定义函数时,默认参数必须指向不变的对象 参数为可变对象时,正常调用的时候,结果没有问题,但是当使用默认参数的时候,结果就会和理想的有差距. In [78]: def add(L=[]): ...: L ...

  3. “崩溃了？不可能，我全 Catch 住了” | Java 异常处理

    前言 今天我们来讨论一下,程序中的错误处理. 在任何一个稳定的程序中,都会有大量的代码在处理错误,有一些业务错误,我们可以通过主动检查判断来规避,可对于一些不能主动判断的错误,例如 RuntimeEx ...

  4. vue项目使用websocket技术

    一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...

  5. Hibernate学习——持久化类的学习

    A.概念 持久化:将内存中的对象持久化(存储)到数据库的过程.Hibernate就是持久化的框架. 持久化类:一个普通java对象与数据库的表建立了映射关系,那么这个类在Hiberna中被称为持久化类 ...

  6. Api管家系列（一）：初探

    前段时间发现一个很好用的API管理工具--API管家,用了一段时间,已经感觉离不开了,抱着分享使我快乐的想法,因为刚开始用的时候随便写过一篇简介,不是很详细,所以现在就重新写,把我这段时间使用的经验和 ...

  7. 了解git的命令行使用

    git现在已经是非常大众的版本管理工具了,如果在windows下用vs这种ide,已经可以很简单的点点鼠标就完成大部分工作了. 但是在某些特殊情况用命令行时,还是需要了解很多命令的. 安装 linux ...

  8. Mysql 字符串分隔函数

    /*** 字符串分隔方法* 获取字符串分隔之后的数组长度*/DROP FUNCTION IF EXISTS `func_get_split_total`;DELIMITER ;;CREATE FUNC ...

  9. 三、 redis进阶篇

    1. redis事务 使用方法:方法为先发送multi命令告诉redis,下面所有的命令属于同一个事务,先不要执行,而是把他们暂时存起来,redis返回OK,然后后面执行需要放在同一个事务里的命令,可 ...

  10. 【原】无脑操作：ElasticSearch学习笔记（01）

    开篇来自于经典的“保安的哲学三问”(你是谁,在哪儿,要干嘛) 问题一.ElasticSearch是什么?有什么用处? 答:截至2018年12月28日,从ElasticSearch官网(https:// ...