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元素的最后一 ...
随机推荐
- 配置java项目的intellij idea的运行环境
才疏学浅,只懂一点点前端的皮毛东西,对于项目运行环境的配置一无所知,今天简单记录一下! 前提:装好了jdk.maven.intellij idea. 1. file菜单->Open...打开从S ...
- iOS ShareSDK 三方分享/登录使用
原文 http://www.cnblogs.com/CoderAlex/p/4860352.html 一: 快速集成 1.前言 作为现在App里必不可少的用户分享需要,社交化分享显然是我们开发app里 ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- WPF-控件(1)
小记:最近公司使用WPF开发一款新的产品,从零基础开始学习WPF,在看书的过程中,有些内容需要规整到一起,最终选择了博客园,希望对自己所掌握的知识有所规整. --------------------- ...
- ffempg支持文件解码
在做一个数据通道 要求有两个 1.支持打开实时流,解码得到图片 2.支持打开视频文件,得到解码图片 第一个要求前任已经实现 bool FfmpegStreamChr::Open(const char ...
- Vuex 源码学习（二）
Vue加载后,将Vuex 加载到 Vue对象上后,初始化Store. (一) Store的参数的定义 其中 action 与 mutation 的订阅者 用 数组存储,而其属性都是用对象存储的. 考虑 ...
- JSP EL隐含对象
JSP 内置对象 JSP EL隐含对象 描述 page pageScope page 作用域 request requestScope request 作用域 session sessionScope ...
- 简单搭建ES6的环境
一.兼容情况 说到ECMAScript6,顺便提一下ECMAScript5,先看一下ES5的兼容情况.ES5浏览器支持情况: Opera 11.60:Internet Explorer 9*:Fire ...
- 使用@contextmanager装饰器实现上下文管理器
通常来说,实现上下文管理器,需要编写一个带有__enter__和 __exit__的类,类似这样: class ListTransaction: def __init__(self, orig_lis ...
- RGB颜色 对照表
来自为知笔记(Wiz)