文章地址 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. Git操作中crlf和lf冲突问题

    多人参与项目开发的时候,经常会遇到代码格式化不一致,在提交的时候出现很多冲突的情况.其中换行符冲突就是一种,在不同的系统平台上是不一样的.UNIX/Linux 使用的是 0x0A(LF),早期的 Ma ...

  2. Java进阶篇设计模式之十三 ---- 观察者模式和空对象模式

    前言 在上一篇中我们学习了行为型模式的备忘录模式(Memento Pattern)和状态模式(Memento Pattern).本篇则来学习下行为型模式的最后两个模式,观察者模式(Observer P ...

  3. C++删除文件末尾字符

    C++中使用fstream来进行文件读写,如果要覆盖文件末尾的部分字符,应该怎么操作呢? #include <iostream> #include <fstream> std: ...

  4. traefik 结合 docker-compose 的快速安装及使用

    traefik 介绍 traefik 是一个为了让部署微服务更加便捷而诞生的现代HTTP反向代理.负载均衡工具. 它支持多种后台 (Docker, Swarm, Kubernetes, Maratho ...

  5. maven 依赖中scope标签的配置范围详解

    在创建Maven项目时,需要在pom.xml 文件中添加相应的依赖,其中有一个scope标签,该标签是设置该依赖范围 (maven项目包含三种classpath{编译classpath,测试class ...

  6. 自定义Json解析工具

    此博客为博主原创文章,转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10689536.html fastjson是很好用的json解析工具,只可惜项目中要 ...

  7. #ifndef, #define, #endif 作用

    #ifndef, #define, #endif 作用 https://www.cnblogs.com/challenger-vip/p/3386819.html

  8. 广州 office365的开发者训练营交流活动简报

    2018年10月13日,在 微软广州办公室(广州市天河区太古汇1座28层微软广州办公室) 成功举办了office365的开发者训练营,本活动在微软官网的地址: https://www.microsof ...

  9. Python算法和数据结构：在二叉树中找到和为sum的所有路径

    玄魂工作室秘书 [玄魂工作室] 思路:先用递归创建一颗二叉树,作为输入:然后对这课二查树进行递归遍历,递归中每遍历一个节点,下次递归的和为sum-data;并用一个数组记录遍历过的路径,当存在sum时 ...

  10. js生成[n,m]的随机数，js如何生成随机数，javascript随机数Math.random()

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...