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
转载于:https://www.cnblogs.com/guangzhou11/p/7347054.html
CSS3 结构性伪类选择器（1）相关推荐
- CSS3学习笔记1：结构性伪类选择器
第2节.结构性伪类选择器 在学习结构性伪类选择器之前,先了解2个概念:sCSS中的伪类选择器&伪元素 伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几 ...
- html伪类选择器代码,CSS3中结构性伪类选择器—:first-of-type实现名言标签（代码实例 ）...
本文目标: 1.掌握CSS中结构性伪类选择器-nth-child的用法 问题: 1.实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器-first-of-type 附加说明: 1.整体宽为 ...
- CSS3选择器--结构性伪类选择器
在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1.伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种,如a:link|a:vis ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- html伪类选择器怎么使用,CSS3 :default伪类选择器使用简介
一.CSS3 :default伪类选择器简介 CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素. 举个例子,一个下拉框,可能有多个选项,我们默认会让某个 处于 sel ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div><section>section 1</section><section>section 2</sec ...
- CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
转自爱设计 原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为 ...
- css3 - 语言伪类选择器
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 4 <head> 5 <meta charset=&q ...
- CSS基础(part20)--CSS3结构伪类选择器
学习笔记,仅供参考,有错必究 参考自:pink老师教案 结构伪类选择器 属性列表: nth-child(n) 参数详解: 注意:本质上就是选中第几个子元素 n可以是数字.关键字.公式 n如果是数字,就 ...
- CSS3否定伪类选择器
否定伪类选择器用来选择不满足某些条件的元素. 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:not(selector) 选择未被选择器selector所选中,且类型为E的元素 3 如果想对某 ...
最新文章
- 网民网上购物决策时间延长
- 按采用的传输介质计算机网络可分为4种,2015年4月全国自考计算机应用基础试卷及答案(00018)...
- Lambda表达式的省略模式【应用】
- 基于 Blazor 打造一款实时字幕
- mysql完整性约束命名_第5章--MySQL索引与完整性约束.ppt
- 快速实现MySQL迁移到Redis
- Mybatis bug修正
- 33.错误处理(2)
- 运行Android项目时指定特定的AVD进行测试
- iphone 抹除设备是什么意思_环保设备公司什么意思？|危汇网|
- Sublime 常用操作
- Word排版打印1寸照片
- kms地址大全_kms激活服务器地址(常用)和自己搭建KMS服务器教程
- diy nas配置推荐2020_廉价NAS方案，手把手教你用淘汰主机安装黑群NAS
- i.e.、e.g.、etc.、et al、viz各种缩写都是什么意思？一文搞懂各种缩写
- 密度图与等高线图——Note_5
- 电影光盘的vob格式视频如何转换成mp4格式
- 概率论学习三、古典概型
- 普通人的网页配色方案
- 大学英语四线上考试翻译题
热门文章
- Java IO 系统（一）
- spring5.0学习笔记3
- python求两个字符串之间最小子串
- mysql修改max_binlog_cache_size
- face_recognition基础接口
- java cdt_Eclipse代码提示功能设置(Java Eclipse+CDT C/C++)
- mysql数据库d盘_Windows Server 2008 R2下修改MySQL 5.5数据库目录为D盘
- mysql5.7.11源码安装_centos 7.0安装MySQL Community Server 5.7.11 源码编译安装
- mysql死锁自动处理方法_19. 死锁的产生和 MySQL 自动处理方式
- yy神曲url解析php_用PHP如何实现解析抖音无水印视频