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. Python中import机制

    Python语言中import的使用很简单,直接使用import module_name语句导入即可.这里我主要写一下"import"的本质. Python官方定义:Python ...

  2. Python网络爬虫与信息提取（三）—— Re模块

    regular expression / regex / RE 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配.Python 自1.5版本起增加了re 模块,它提供 ...

  3. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第4讲（创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机，小飞机死亡）

    一.创建敌方飞机 1.思考创建思路: 创建敌方飞机思路与创建玩家飞机思路一样: (1)思考敌方飞机具备什么属性: 敌方飞机的图片.坐标.飞行速度.状态(是否被击中) 设置小飞机被击中时消失时间.飞机可 ...

  4. pstree 命令详解

    作用: 以命令树状图的方式展现进程之间的派生关系, 显示效果比较直观. 选项: -a 显示每个程序的完整指令, 包含路径, 参数或者是常驻服务的标志 -c 不使用精简标示法 -h 列出树状图,特别标明 ...

  5. Windows,Mac与Linux哪个更适合开发者？

        以前写的,怕引来口水战,干脆不发.这段时间面试了十来人,用Mac的开发水平明显高于Windows的,挺多感想的,于是改改发了吧.      Windows: 对普通用户而言体验最友好,对开发者 ...

  6. java复写equals例子

    public class users { String name; static int age; public boolean equals(Object obj) { if(this==obj){ ...

  7. Python删除list中多个相同元素

    pop和remove方法都可以删除list中的元素,个人更倾向于使用remove方法,因为在删除过程中不会打印信息,安静的把任务完成. pop方法:删除过程中会打印信息 >>> al ...

  8. Maven项目不打包*.hbm.xml文件

    <build> <finalName>basic</finalName> <plugins> <plugin> <groupId> ...

  9. Head First设计模式之模板方法模式

    一.定义 在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中,使得子类可以不改变算法结构的情况下,重定义该算法中的某些特定步骤. 比较通俗的说法,子类决定如何实现算法中的某些步骤,比如两个一连串 ...

  10. spring boot RESTFul API拦截 以及Filter和interceptor 、Aspect区别

    今天学习一下RESTFul api拦截 大概有三种方式 一.通过Filter这个大家很熟悉了吧,这是java规范的一个过滤器,他会拦截请求.在springboot中一般有两种配置方式. 这种过滤器拦截 ...