CSS3 结构性伪类选择器（1）
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）的更多相关文章
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- CSS3 结构性伪类选择器（2）
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
- css3 结构性伪类选择器
伪类 选择器 类型 说明 备注 E:first-line 伪元素选择器 选择匹配E元素内的第一行文本 E:first-letter 伪元素选择器 选择匹配E元素内的第一个字符 E:before 伪元素 ...
- css3结构性伪类选择器
- h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target
root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...
- 【CSS3】---结构性伪类选择器-first-child+last-child
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
随机推荐
- js方法返回多值如何取值demo
js方法返回,如何取值?下面demo两种方法 new array 和 json 返回值 取值示例. 方法一: new array <html> <head> <meta ...
- 我的"开发工具箱"
我使用的IDEA插件 Free Mybatis plugin Alibaba Java Coding Guidelines 我的IDEA开发配置 配置Maven Runner -DarchetypeC ...
- selinux 关闭
查看SELinux状态: 1./usr/sbin/sestatus -v ##如果SELinux status参数为enabled即为开启状态 SELinux status: ...
- python 调用C++ DLL,传递int,char,char*，数组和多维数组
ctypes 数据类型和 C数据类型 对照表 ctypes type C type Python type c_bool _Bool bool (1) c_char char 1-character ...
- tcpdump中文帮助
TCPDUMP(8) System Manager's Manual ...
- CSS3------box-shadow，即单边阴影效果设置
box-shadow修改元素的阴影效果要方便得多,因为box-shadow可以修改六个参数,得到不同的效果.下面结合一些简单的案例来对box-shadow属性进行演示说明. 1．单边阴影效果 定义元素 ...
- node+express POST请求
// POST 登录 app.post('/login', function (req, res) { // 定义了一个post变量,用于暂存请求体的信息 let [post,addSql,addSq ...
- 浅谈vue对seo的影响
不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...
- c# asp.net uploadify 上传大文件 出现的 HTTP 404 问题
用uploadify在IIS6下上传大文件没有问题,但是迁移到IIS7下面,上传大文件时,出现HTTP 404错误. 查了半天,原来是IIS7下的默认设置限制了上传大小.这个时候Web.Config中 ...
- LDAP分布式数据库的介绍和安装使用
目录服务 目录是一个为查询.浏览和搜索而优化的专业分布式数据库,它呈树状结构组织数据,就好象Linux/Unix系统中的文件目录一样.目录数据库和关系数据库不同,它有优异的读性能,但写性能差,并且没 ...