CSS3中结构伪类选择器——root、not、empty、target选择器
1.root选择器
将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含整个页面的<html>部分。
<style type="text/css">
:root{
background:yellow;
}
body{
background:green;
}
</style>
注意：不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成了绿色。
2.not选择器
如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。
body*:not(h1){
background:yellow;
}
3.empty选择器
适用empty选择器来指定当元素中内容为空白时使用的样式。
:empty{
background:yellow;
}
4.target选择器
使用target选择器来对页面中某个target元素（该元素的id被当做页面的超链接来使用）指定样式，该样式只在用户点击了页面的超链接，并且跳转到target元素后起作用。
<style type="text/css">
:target{
background:yellow;
}
</style>
<a href="#text1">文字1</a>
<div id="text1">
<h1>文字1</h1>
<p>此处省略100个字</p>
</div>
CSS3中结构伪类选择器——root、not、empty、target选择器的更多相关文章
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- css3中关于伪类的使用
目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果 ...
- css3中的伪类选择器
一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...
- CSS3中的伪类选择器详解
类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
- CSS3中only-child伪类选择器
<body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ ...
- CSS和CSS3中的伪元素和伪类（总结）
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- CSS中的伪类与伪元素
在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...
- 如何使用CSS3中的结构伪类选择器和伪元素选择器
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...
随机推荐
- 老生常谈之Block
前面有一篇介绍Block的博客,主要介绍了Block的简单使用技巧.这篇博客主要更加深入地了解一下Block.包括:Block的实现.__Block的原理以及Block的存储域三方面. Block的实 ...
- Django实战，小网站实现增删改查
直接上代码 视图: from django.shortcuts import render,render_to_response, redirect from submit import models ...
- 用html和css轻松实现康奈尔笔记(5R笔记)模板
缘起 人家都说康奈尔笔记法,很好用呢,能抵抗遗忘曲线,让你的笔记事半功倍,有兴趣的同学自行百度哈. 网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可能更方便一点,行距很小,而且还有网址在上 ...
- Java I/O---Reader & Writer(字符流)
1.Reader & Writer 当我们初次看见Reader和Writer类时,可能会以为这是两个用来替代InputStream和OutputStreamt的类,但实际上并非如此. 尽管一些 ...
- hash_equals()函数
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/92 了解下hash_equals的概念: bool hash_e ...
- ArcGIS API for JavaScript 4.3学习笔记[新] AJS4.3和AJS3.20新特性
今天"ArcGIS极客说"公众号推送了这两个大版本的更新,吓得我赶紧撸了一篇新博客. 这里就不写代码验证了,作为新特性小节简单介绍一下!~ AJS 4.3 1. 更强大的Featu ...
- LAMP第一部分-环境搭建
1. 安装mysqlcd /usr/local/src/ wget http://syslab.comsenz.com/downloads/linux/mysql-5.1.40-linux-i686- ...
- golang sql database drivers
https://github.com/golang/go/wiki/SQLDrivers SQL database drivers The database/sql and database/sql/ ...
- Git详解之七：自定义Git
自定义 Git 到目前为止,我阐述了 Git 基本的运作机制和使用方式,介绍了 Git 提供的许多工具来帮助你简单且有效地使用它. 在本章,我将会介绍 Git 的一些重要的配置方法和钩子机制以满足自定 ...
- C# winForm资源文件实现多语言切换
这是我目前看到过最简单的多语言切换了 操作步驟 介面上的多語 Step1.將表單的Localizable屬性設為True Step2.切換表單的Language屬性為欲使用的語系 設完後會在分頁標籤上 ...