文章地址 https://www.cnblogs.com/sandraryan/

root：将样式绑定到根元素（html中的根元素是<html></html>）

举个栗子

  1.     :root{
  2.         background-color: yellow;
  3.     }
  4.     body{
  5.         background-color: lightgray;
  6.     }
  7.     .div1{
  8.         width: 200px;
  9.         height: 200px;
  10.         background-color: black;
  11.         margin: 0 auto;
  12.     }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="div1"></div>
  17. </body>
    效果：除了div黑色，div所在行是浅灰色，其余部分黄色（：root）
    （效果图太大 不放了）

所以：我以为，root的样式是<html>以内<body>以外部分的样式

：not 不选择某个元素中的某个部分

  1.     .box *:not(h1){
    /*选择.box下所有元素中不是h1的 */
  2.         width: 50px;
  3.         height: 50px;
  4.         background-color:red;
  5.     }
  6.  
  7. <body>
  8.     <div class="box">
  9.         <div></div>
  10.         <div></div>
  11.         <h1></h1>
  12.     </div>
  13.  
  14. </body>

:empty 元素中内容空白时显示的样式

  1.     <style>
  2.         div:empty{
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: red;
  6.         }
  7.     </style>
  8.  
  9. <body>
  10.     <div class="div1"></div>
  11. </body>
    div中没有任何东西，会使用这个样式，为div内部添加内容后，该样式失效

:target 对页面上target元素制定样式，指定的样式会在用户点击并成功跳转后显示

  1.     <style>
  2.        .div1{
  3.            height: 800px;
  4.            background-color: lightgray;
  5.        }
  6.        :target{
  7.            background-color: red;
  8.        }
  9.     </style>
  10. </head>
  11. <body>
  12.     <p><a href="#div1">click</a></p>
  13.     <p><a href="#div2">click</a></p>
  14.     <p><a href="#div3">click</a></p>
  15.     <div class="div1"></div>
    　　//这个div用来拉长页面，让跳转效果更明显
  16.     <div id="div1">content</div>
  17.     <div id="div2">content</div>
  18.     <div id="div3">content</div>
  19. </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. 【ODI】| 数据ETL：从零开始使用Oracle ODI完成数据集成（二）

    前一节已经完成了Oracle数据库和ODI的安装,并已经为ODI在Oracle数据库中创建了两个用户,分别用于存放主资料库数据和工作资料库数据,在ODI中完成主资料库和工作资料库的创建,也分别为其创建 ...

  2. .net core redis 驱动推荐，为什么不使用 StackExchange.Redis

    前言 本人从事 .netcore 转型已两年有余,对 .net core 颇有好感,这一切得益于优秀的语法.框架设计. 2006年开始使用 .net 2.0,从 asp.net 到 winform 到 ...

  3. 学习 JavaScript （三）核心概念：语法、变量、数据类型

    JavaScript 的核心概念主要由语法.变量.数据类型.操作符.语句.函数组成,这篇文章主要讲解的是前面三个,后面三个下一篇文章再讲解. 01 语法 熟悉 JavaScript 历史的人应该都知道 ...

  4. 21 , CSS 构造模型

    1. div 2. 边距 3. 边框 4. 定位 5. 浮动 1 21.1  div 部分(division)---<div>元素,经常以 div 形式引用---是 XHTML 元素,用于 ...

  5. 学web前端的第一天

    大家好,我是蓝颜.上次写博客是18年的4月份,不是不想写,是不知道怎么写,求写博客的技巧.从今天开始一天一更,不管写的怎么样,坚持的写下去.闲话不多说,第一次接触前端,什么都不懂,因为对这玩意的热爱, ...

  6. 前端笔记之HTML

    前端三层:内容层(结构层)HTML.样式层(表现层)CSS.行为层JavaScript 层 语言 含义 结构层 HTML 由 HTML 或 XHTML之类的标记语言负责创建.标签,也就是那些出现在尖括 ...

  7. ios11苹果手机怎么投屏到电脑

    使用过苹果手机的用户都知道,苹果手机触摸屏操作极为流畅,网页浏览也非常轻松,各种网络上的应用可以说是非常完美.iPhone的娱乐功能相当的强大,能让苹果iPhone超越了其他手机很大的距离.但是手机怎 ...

  8. 从0到1打造自己的VOIP网络电话系统(基于FreePBX)

    从0到1打造自己的网络电话系统 最近流量卡越来越便宜了,看看自己手里的"坑不死老用户"的联通卡,顿时感觉到深深的恶意,但是iPhone没有双卡功能,所以只好自己动手打造一个网络电话 ...

  9. nginx反向代理配置

    最近在项目中使用nginx反向代理,根据不同的请求路径,将请求分发到不同服务.下面的示例主要完成如下功能 /prod/路径的请求分发到prod服务 /test/路径的请求分发到test服务 创建文件夹 ...

  10. 如何取消-"插入耳机自动显示提示框"

    首先我们打开控制面板->1,你可以直接搜索控制面板打开  2,你可以右击我的电脑->点击属性->左上角打开控制面板