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. ASP.NET.Core中使用AutoMapper

      首先需要在NuGet中引用AutoMapper的类库 install-package AutoMapper install-package AutoMapper.Extensions.Micros ...

  2. mac下通过mdfind命令搜索文件

    mdfind命令就是Spotlight功能的终端界面,这意味着如果Spotlight被禁用,mdfind命令也将无法工作.mdfind命令非常迅速.高效.最基本的使用方法是: mdfind -name ...

  3. 嵌套查询别名必须性示例。HAVING用法

    HAVING的一个重要作用: SELECT子句有统计函数嵌套时SELECT子句不能出现GROUP BY列,如果需要显示此列可以把嵌套的统计函数写成子查询放在HAVING子句中. 可用HAVING简化语 ...

  4. python安装和环境变量的配置

    python安装和环境变量的配置 研究生阶段学习的需求,简单的学习了python的语法和基础之后产生了兴趣,有了想从基础把python学好用好的想法.因此在忙碌的学习中抽出时间,在每天花几个小时学习p ...

  5. java.lang.StringBuilder和java.lang.StringBuffer (JDK1.8)

    这两个类都是继承自AbstractStringBuilder,AbstractStringBuilder有两个成员属性 char[] value; int count; 前者用于存储字符串,后者用于统 ...

  6. xml文件解析（使用解析器）

    一.Xml解析,解析xml并封装到list中的javabean中 OM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在 ...

  7. 简单工厂(Simple Factory),最合适的设计模式首秀.

    简单工厂又称为静态工厂方法(static factory method)模式,简单工厂是由一个工厂来决定创建出哪一种个体的实现,在很多的讨论中,简单工厂做为工厂方法模式(Factory Method) ...

  8. kafka副本机制之数据可靠性

    一.概述 为了提升集群的HA,Kafka从0.8版本开始引入了副本(Replica)机制,增加副本机制后,每个副本可以有多个副本,针对每个分区,都会从副本集(Assigned Replica,AR)中 ...

  9. 初识JavaScript(一)

    初识JavaScript(一) 最近由于工作的需要的原因,我从一个写后台的现在让我转到写前端,再加上我的js部分特别的差,所以我现在开始学习js部分的知识. 我的第一篇博文就这样开始写了.俗话说,千里 ...

  10. vue有关小知识

      截取链接参数: //截取链接参数 this.id = this.$route.query.id;