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选择器的更多相关文章

  1. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  2. css3中关于伪类的使用

    目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果 ...

  3. css3中的伪类选择器

    一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...

  4. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  5. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

  6. CSS3中only-child伪类选择器

    <body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ ...

  7. CSS和CSS3中的伪元素和伪类（总结）

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  8. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  9. 如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...

随机推荐

  1. JSON Schema 校验实例

    JSON Schema 简介 JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. ...

  2. SQL 杂活

    例子一:查询两个表数据并且分页展示 select * from ( select ROW_NUMBER() OVER(order by CreateTime desc) as rownum,* fro ...

  3. selenium python自动化简明演示

    1.selenium安装: pip install -U selenium参考:https://pypi.python.org/pypi/selenium#downloads2.下载firefox驱动 ...

  4. JavaScript基础1——基本概念

    关于JS的概念 JavaScript 是一种弱类型语言. JavaScript 是一种客户端脚本语言(脚本语言是一种轻量级的编程语言). JavaScript是基于对象的.(因为面向对象需要具有封装. ...

  5. iOS Swift--UIImageView UIImage

    1.UIImageView + UIImage    Demo import UIKit class UIImageViewViewController: UIViewController { var ...

  6. Simple Games Using SpriteKit

    p.p1 { margin: 0.0px 0.0px 12.0px 0.0px; line-height: 14.0px; font: 12.0px Times; color: #000000 } s ...

  7. [C#]使用Redis来存储键值对（Key-Value Pair）

    本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.5及以 ...

  8. [LeetCode] 链表反转相关题目

    暂时接触到LeetCode上与链表反转相关的题目一共有3道,在这篇博文里面总结一下.首先要讲一下我一开始思考的误区:链表的反转,不是改变节点的位置,而是改变每一个节点next指针的指向. 下面直接看看 ...

  9. 准确率(Accuracy), 精确率(Precision), 召回率(Recall)和F1-Measure（对于二分类问题）

    首先我们可以计算准确率(accuracy),其定义是: 对于给定的测试数据集,分类器正确分类的样本数与总样本数之比.也就是损失函数是0-1损失时测试数据集上的准确率. 下面在介绍时使用一下例子: 一个 ...

  10. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信小程序红包开发语音红包

    公司最近开发的一个微信语音红包,就是前些时间比较火的包你说红包小程序.如何提高识别的精准度呢. 在说精准度之前,先大概说下整个语音识别的开发流程.前面我有文章已经说到过了.具体我就不谈了.一笔带过. ...