文章地址 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. Mybatis增删改查，Demo整合

    第一步:MyBatis的Jar包引入mybatis-3.2.7.jarmysql-connector-java-5.1.8.jar MyBatis的pom.xml依赖 <dependencies ...

  2. Git协同工作流介绍

    git相关的文章和教程非常多,但是系统介绍和了解工作流的人并不多,在使用过程中用错或用偏的也不少,这里分享的是,假设你已经入门的情况下,我们如何去选择适合团队需要的工作流. git优势 这里先唠叨gi ...

  3. 微服务框架surging学习之路——序列化

    1.对微服务的理解 之前看到在群里的朋友门都在讨论微服务,看到他们的讨论,我也有了一些自己的理解,所谓微服务就是系统里的每个服务都 可以自由组合.自由组合这个就很厉害了,这样一来,每个服务与服务之间基 ...

  4. js 对象拷贝

    在JavaScript中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String),而复杂数据类型包括Object.Func ...

  5. 代码规范：idea上添加阿里巴巴Java开发插件

    在一个项目中,不可缺少的是书写代码的规范,没有好的代码规范约束,大家各写各的,十分不利于代码的维护与修改.     首先来看看如何在idea上添加这个插件: 直接上图 点击右边的蓝色按钮就可以安装了, ...

  6. SQL Server统计信息偏差影响表联结方式案例浅析

      我们知道数据库中的统计信息的准确性是非常重要的.它会影响执行计划.一直想写一篇关于统计信息影响执行计划的相关博客,但是都卡在如何构造一个合适的例子上,所以一直拖着没有写.巧合,最近在生产环境中遇到 ...

  7. c/c++ 动态库与静态库的制作和使用

    静态库的用法 静态库的文件名 libxxx.a -->对应windows的.lib文件 做静态库的命令: ar rcs libxxx.a file1.o file2.o file.o 使用静态库 ...

  8. 个人整理的 Windows 下 .NET 开发必装的软件

    注: 最后更新时间:2019-03-15 一..NET 开发 1. 必装 软件名称 说明 下载地址 JetBrains Toolbox JetBrins 全家桶管理工具. 下载地址 JetBrains ...

  9. [LeetCode] 26. 删除排序数组中的重复项

    题目链接:https://leetcode-cn.com/problems/remove-duplicates-from-sorted-array/ 题目描述: 给定一个排序数组,你需要在原地删除重复 ...

  10. webpack打包nodejs项目（前端代码）

    PS.若本文没有帮到你可以看看我的进阶版点此前往 适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引 ...