【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root
:root
选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。
示例演示:
通过“:root”选择器设置背景颜色
HTML代码:
<div>:root选择器的演示</div>
CSS代码:
:root {
background:orange;
}
演示结果:
“:root”选择器等同于<html>元素,简单点说:
:root{background:orange}
html {background:orange;}
得到的效果等同。
建议使用:root方法。
另外在IE9以下还可以借助“:root”实现hack功能。
结构性伪类选择器—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>
演示结果:
结构性伪类选择器—empty
:empty
选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
示例显示:
比如说,你的文档中有三个段落p元素,你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。
HTML代码:
<p>我是一个段落</p>
<p> </p>
<p></p>
CSS代码:
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}
演示结果:
结构性伪类选择器—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对象分别设置不的样式。
【CSS3】---结构性伪类选择器-root+not+empty+target的更多相关文章
- h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target
root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...
- CSS3 结构性伪类选择器(1)
1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...
- 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结构性伪类选择器
- 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.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...
随机推荐
- spring AOP Bean添加新方法
目的:为studentAdditionalDetails中添加Student的showDetails()和ExtraShowDetails()两个方法 spring 中AOP能够为现有的方法添加额外 ...
- nested exception is java.io.FileNotFoundException: class path resource [spring/spring-datasource-mog
spring单元測试时发现的问题: org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsin ...
- 网站性能扩展案例:每天30-50亿请求,300K QPS是如何炼成的
Reduce Data广告服务网站(http://reducedata.com)如何扩展到每天300K QPS请求?分享经验如下: 1. 为大规模而设计,广告服务平台从一开始增长就很惊人,因此,系统开 ...
- oc-28-构造函数
Dog.h #import <Foundation/Foundation.h> @interface Dog : NSObject { NSString *_name; int _age; ...
- MySQL执行SHOW STATUS查询服务器状态状态之Handler_read_* 详解
在MySQL里,我们一般使用SHOW STATUS查询服务器状态,语法一般来说如下: SHOW [GLOBAL | SESSION] STATUS [LIKE ‘pattern’ | WHERE ex ...
- /proc/sys/vm/ 内存参数
linux下proc里关于磁盘性能的参数 http://blog.csdn.net/eroswang/article/details/6126646 我们在磁盘写操作持续繁忙的服务器上曾经碰到一个特 ...
- smartPtr指针的实现
编写一个智能指针类.智能指针是一种数据类型,一般用模板实现,模拟指针行为的同时还提供自动来及回收机制.它会自动记录SmartPointer<T*>对象的引用计数,一旦T类型对象的引用计数为 ...
- gradle的maven plugin使用
在分布式系统开发中,基于gradle的项目,要共享jar一般是借助maven私服.那么gradle的maven插件如何做到上传binary jar,source jar, javadoc jar到私服 ...
- NHibernate教程
NHibernate教程 一.NHibernate简介 在今日的企业环境中,把面向对象的软件和关系数据库一起使用可能是相当麻烦.浪费时间的.NHibernate是一个面向.Net环境的对象/关系数据库 ...
- [设计模式2]--模板(Template)模式
原文出处:http://blog.csdn.net/lwbeyond/article/details/7517679 一. 问题 在面向对象系统的分析与设计过程中经常会遇到这样一种情况:对于某一个业务 ...