1.CSS3 结构性伪类选择器—root

:root选择器就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

“:root”选择器等同于<html>元素，简单点说：

:root{background:orange}

html {background:orange;}

示例演示：

通过“:root”选择器设置背景颜色

HTML代码：

<div>:root选择器的演示</div>

CSS代码：

:root {

  background:orange;

}

演示结果：

“:root”选择器等同于<html>元素，简单点说：

:root{background:orange}

html {background:orange;}

得到的效果等同。

建议使用:root方法。

:root 代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>结构性伪类选择器—root</title>

    <style type="text/css">

        :root{

            background: skyblue;

           color: blue;

        }

    </style>

</head>

<body>

<div>Root选择器修改HTML元素的背景颜色</div>

</body>

</html>

效果:

html 代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>结构性伪类选择器—root</title>

    <style type="text/css">

        html{

            background: rebeccapurple;

           color: blue;

        }

    </style>

</head>

<body>

<div>Root选择器修改HTML元素的背景颜色</div>

</body>

</html>

效果:

2.:not选择器称为否定选择器

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：

form {

  width: 200px;

  margin: 20px auto;

}

div {

  margin-bottom: 20px;

}

input:not([type="submit"]){

  border:1px solid red;

}

相关HTML代码：

<form action="#">

  <div>

    <label for="name">Text Input:</label>

    <input type="text" name="name" id="name" placeholder="John Smith" />

  </div>

  <div>

    <label for="name">Password Input:</label>

    <input type="text" name="name" id="name" placeholder="John Smith" />

  </div>

  <div>

    <input type="submit" value="Submit" />

  </div>

</form>  ​

演示结果：

 代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>结构性伪类选择器—not</title>

    <style type="text/css">

        div{

            padding: 10px ;

            width:200px;

        }

        div:not([id="footer"]){

            background: orange;

        }

        li{

            background: skyblue;

            width:250px;

        }

        li:not([id="class2"] ){

            background: slateblue;

        }

    </style>

</head>

演示结果：

3.CSS3 结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

示例显示：

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码：

<p>我是一个段落</p>

<p> </p>

<p></p>​

CSS代码：

p{

 background: orange;

 min-height: 30px;

}

p:empty {

  display: none;

}​

演示结果：

 代码示例:

 <!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>结构性伪类选择器—empty</title>

   <style type="text/css">

       div {

           background: blueviolet;

           min-height: 30px;

           width: 200px;

       }

       div:empty {

           border: 1px dashed red;

           background: skyblue;

       }

   </style>

</head>

<body>

<div>我这里有内容</div>

<div> <!-- 我这里有一个空格 --></div>

<div></div><!-- 我这里任何内容都没有 -->

</body>

</html>

演示结果：

4.CSS3 结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。

示例展示

点击链接显示隐藏的段落。

HTML代码：

<h2><a href="#brand">Brand</a></h2>

<div class="menuSection" id="brand">

    content for Brand

</div>

CSS代码：

.menuSection{

  display: none;

}

:target{/*这里的:target就是指id="brand"的div对象*/

  display:block;

}

演示结果：

分析：

1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand

2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。

多个url（多个target）处理：

就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。
如下面例子：
html代码：

<h2><a href="#brand">Brand</a></h2>

<div class="menuSection" id="brand">

  content for Brand

</div>

<h2><a href="#jake">Brand</a></h2>

<div class="menuSection" id="jake">

 content for jake

</div>

<h2><a href="#aron">Brand</a></h2>

<div class="menuSection" id="aron">

    content for aron

</div>

css代码：

#brand:target {

  background: orange;

  color: #fff;

}

#jake:target {

  background: blue;

  color: #fff;

}

#aron:target {

  background: red;

  color: #fff;

}

上面的代码可以对不同的target对象分别设置不的样式。

 代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>target demo</title>

    <style type="text/css">

                      div:target{

                          background: purple;border: 1px solid black;

                      }

    </style>

</head>

<body>

    <ul>

        <li><a href="#tab1">tab1</a></li>

        <li><a href="#tab2">tab2</a></li>

        <li><a href="#tab3">tab3</a></li>

        <li><a href="#tab4">tab4</a></li>

    </ul>

             <div id="tab1">this is tab1</div>

             <div id="tab2">this is tab2</div>

             <div id="tab3">this is tab3</div>

             <div id="tab4">this is tab4</div>

</body>

</html>

演示结果：

转载：http://www.imooc.com/code/736

CSS3 结构性伪类选择器（1）的更多相关文章

  1. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  2. CSS3 结构性伪类选择器（2）

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

  3. css3 结构性伪类选择器

    伪类 选择器 类型 说明 备注 E:first-line 伪元素选择器 选择匹配E元素内的第一行文本 E:first-letter 伪元素选择器 选择匹配E元素内的第一个字符 E:before 伪元素 ...

  4. css3结构性伪类选择器

  5. h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target

    root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...

  6. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  7. 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)

    结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...

  8. 【CSS3】---结构性伪类选择器-first-child+last-child

    结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...

  9. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

随机推荐

  1. [CSP-S模拟测试]:购物（柯朵莉树）

    题目描述 $visit_world$有一个商店,商店里卖$N$个商品,第$i$个的价格为$a[i]$我们称一个正整数$K$是美妙的,当且仅当我们可以在商店里选购若干个商品,使得价格之和落在区间$[K, ...

  2. k8s上的基础概念和术语

    kubernetes基本概念和术语   kubeernetes中的大部分概念如Node,Pod,Replication Controller ,Serverce等都可以看作一种“资源对象”,几乎所有的 ...

  3. WIN7系统JavaEE(java+tomcat7+Eclipse)环境配置

    https://jingyan.baidu.com/article/3a2f7c2e62d25e26afd611fa.html WIN7系统JavaEE(java+tomcat7+Eclipse)环境 ...

  4. characteristics of competent communicators

    https://www.universalclass.com/articles/business/communication-studies/be-a-competent-communicator.h ...

  5. LeetCode 10——正则表达式匹配

    1. 题目 2. 解答 在 回溯算法 中我们介绍了一种递归的思路来求解这个问题. 此外,这个问题也可以用动态规划的思路来解决.我们定义状态 \(P[i][j]\) 为子串 \(s[0, i)\) 和 ...

  6. 创建虚拟环境virtualenv的小问题

    在创建完虚拟环境后,settings里面虚拟环境的python编译器不是虚拟的,而是全局的,这个时候. 由于创建的虚拟环境的存储地址默认是在c盘. 自定义虚拟环境的存储地址步骤: 第一步:在配置环境变 ...

  7. spring boot 整合 RabbitMQ 错误

    1.错误 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.spr ...

  8. ecshop后台增加模块菜单详细教程

    我们有时候针对ecshop如此开发,想在后台加一些菜单,最模板以前提供过教程,但是并非很系统,今天最模板抛砖引玉图文教程告诉大家:如何在ecshop后台增加模块菜单! 首先需要修改四个文件:inc_p ...

  9. 如何让字典保持有序---Python数据结构与算法相关问题与解决技巧

    实际案例: 某编程竞赛系统,对参赛选手编程解体进行计时,选手完成题目后,吧该选手解体用时记录到字典中,以便赛后按选手名查询成绩 {'Lilei':(2,43),'HanMei':(5,52),'Jim ...

  10. 为什么说 Babel 将推动 JavaScript 的发展【转】

    Babel是一个转换编译器,它能将 ES6 转换成可以在浏览器中运行的代码.Babel 由来自澳大利亚的开发者Sebastian McKenzie创建.他的目标是使 Babel 可以处理 ES6 的所 ...