CSS3新增的伪类选择器

  伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类:

  • 结构性伪类选择器
  • UI元素状态伪类选择器
  • 其他伪类选择器

  

1、结构性伪类选择器

  • Selector:root:匹配文档的根元素。在HTML文档中,根元素永远是<html.../>元素。
  • Selector:first-child:匹配符合Selector选择器,且必须是其父元素的第一个子节点的元素。
  • Selector:last-child:匹配符合Selector选择器,且必须是其父元素的最后一个子节点的元素。
  • Selector:nth-child(n):匹配符合Selector选择器,且必须是其父元素的第n个子节点的元素。
  • Selector:nth-last-child(n):匹配符合Selector选择器,且必须是其父元素的倒数第n个子节点的元素。
  • Selector:only-child:匹配符合Selector选择器,且必须是其父元素的唯一子节点的元素。
  • Selector:first-of-type:匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的第一个元素。
  • Selector:last-of-type:匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的最后一个元素。
  • Selector:nth-of-type(n):匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的第n个元素。
  • Selector:nth-last-of-type(n):匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的倒数第n个元素
  • Selector:only-of-type:匹配符合Selector选择器,且是与它同类型、同级的兄弟元素中的唯一一个元素。
  • Selector:empty:匹配符合Selector选择器,且其内部没有任何子元素(包括文本节点)的元素。
  • Selector:lang(lang):匹配符合Selector选择器,且内容是特定语言的元素。

对于:nth-child和:nth-last-child两个伪类选择器,还支持如下用法。

  Selector:nth-child(odd/event):匹配符合Selector选择器,且必须是其父元素的第奇数个/偶数个子节点的元素

  Selector:nth-last-child(odd/event):匹配符合Selector选择器,且必须是其父元素的第奇数个/偶数个子节点的元素

  Selector:nth-child(xn y):匹配符合Selector选择器,且必须是其父元素的第xn y个子节点的元素

  Selector:nth-last-child(xn y):匹配符合Selector选择器,且必须是其父元素的第xn y个子节点的元素

使用:nth-last-child伪类选择器的示例如下:

<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> child </title><style type="text/css">/* 定义对作为其父元素的倒数第3n 1个(1、4、7)子节点的li元素起作用的CSS样式 */li:nth-last-child(3n 1) {border: 1px solid black;}</style>
</head>
<body>
<ul><li id="java">Java</li><li id="javaee">轻量级Java EE</li><li id="ajax">Ajax</li><li id="xml">XML</li><li id="ejb">经典Java EE</li><li id="android">Android</li>
</ul>
</body>

 

其效果如下:

 

 

2、UI元素状态伪类选择器

  UI元素状态伪类选择器包含有:Selector:link、Selector:visited、Selector:active、Selector:hover、Selector:focus、Selector:enabled、Selector:disabled、Selector:checked、Selector:default、Selector:indeterminate、Selector:read-only、Selector:read-write、Selector:required、Selector:optional、Selector:valid、Selector:invalid、Selector:in-range、Selector:out-of-range、Selector::selection(该选择器前面有两个冒号)

3、其他伪类选择器

  3.1:target伪类选择器(匹配符合Selector选择器且必须是命名锚点目标的元素)

    要求元素必须是命名锚点的目标,且必须是当前正在访问的目标。它的作用是页面可通过该选择器高亮显示正在被访问的目标。下面示范了:target选择器的用法(该代码为《疯狂HTML 5 CSS 3 JavaScript讲义》中的示例代码)

 

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> :target </title><style type="text/css">:target{background-color: #ff0;}</style>
</head>
<body>
<p id="menu">
<a href="#java">疯狂Java讲义</a> | 
<a href="#ee">轻量级Java EE企业应用实战</a> | 
<a href="#android">疯狂Android讲义</a> | 
<a href="#ejb">经典Java EE企业应用实战</a>
</p>
<div id="java">
<h2>疯狂Java讲义</h2>
<p>本书详细介绍了Java语言各方面的内容。</p>
</div>
<div id="ee">
<h2>轻量级Java EE企业应用实战</h2>
<p>本书详细介绍Struts 2、Spring 3、Hibernate三个框架整合开发的知识</p>
</div>
<div id="android">
<h2>疯狂Android讲义</h2>
<p>本书详细介绍了Android应用开发的知识。</p>
</div>
<div id="ejb">
<h2>经典Java EE企业应用实战</h2>
<p>本书详细介绍JSF 、EJB 3、JPA等Java EE相关的知识</p>
</div>
</body>

 下面显示的是点击了“疯狂Java讲义”链接后显示的效果

 

  3.2:not伪类选择器(匹配符合Selector1选择器但不符合Selector2选择器的元素,相当于用Selector1减去Selector2)

    下面页面代码示范了:not选择器的用法:

 

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> :not </title><style type="text/css">li:not(#ajax) {color: #999;font-weight: bold;}</style>
</head>
<body>
<ul><li id="java">疯狂Java讲义</li><li id="javaee">轻量级Java EE企业应用实战</li><li id="ajax">疯狂Ajax讲义</li><li id="xml">疯狂XML讲义</li><li id="android">疯狂Android讲义</li>
</ul>
</body>

 

从运行结果可以看到,除了id为ajax的所有<li.../>元素字体设置为#999表示的颜色,且字体加粗显示。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364894.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

签名SOAP消息–生成封装的XML签名

数字签名是使数字内容真实可信的一种广泛使用的机制。 通过为某些内容生成数字签名&#xff0c;我们可以让另一方能够验证该内容。 通过此验证&#xff0c;它可以保证在我们签名后不会更改。 通过这个示例&#xff0c;我将分享如何为SOAP信封生成签名。 但是&#xff0c;这当然…

2019 The 19th Zhejiang University Programming Contest

感想&#xff1a; 今天三个人的状态比昨天计院校赛的状态要好很多&#xff0c;然而三个人都慢热体质导致签到题wa了很多发。最后虽然跟大家题数一样(6题)&#xff0c;然而输在罚时。 只能说&#xff0c;水题还是刷得少&#xff0c;看到签到都没灵感实在不应该。 题目链接&#…

openvas安装和基本使用

OpenVAS是开放式漏洞评估系统&#xff0c;也可以说它是一个包含着相关工具的网络扫描器。OpenVAS是开放式漏洞评估系统&#xff0c;也可以说它是一个包含着相关工具的网络扫描器。其核心部件是一个服务器&#xff0c;包括一套网络漏洞测试程序&#xff0c;可以检测远程系统和应…

修改mysql编码方式centos_CentOS下修改mysql数据库编码为UTF-8(附mysql开启远程链接和开放3306端口)...

楼主在配置好linux云服务器的jdk,tomcat,mysql后&#xff0c;当要开始部署项目是&#xff0c;忽然意识到一个很严重的问题&#xff0c;那就是数据库的编码问题&#xff0c;自安装完成后并未修改数据库的额编码。。。。下面就来讲说linux下修改mysql的编码问题吧。。有一个问题网…

Java 8 Lambda表达式的函数式编程– Monads

什么是monad &#xff1f;&#xff1a; monad是一种设计模式概念&#xff0c;用于大多数功能编程语言&#xff08;如Lisp&#xff09;或现代世界的Clojure或Scala中。 &#xff08;实际上&#xff0c;我会从scala复制一些内容。&#xff09;现在&#xff0c;为什么它在Java中变…

srtvlet filter

Filter&#xff0c;过滤器&#xff0c;顾名思义&#xff0c;即是对数据等的过滤&#xff0c;预处理过程。为什么要引入过滤器呢&#xff1f;在平常访问网站的时候&#xff0c;有时候发一些敏感的信息&#xff0c;发出后显示时 就会将敏感信息用*等字符替代&#xff0c;这就是用…

mysql怎么合并行_mysql怎么合并行

mysql合并行的方法&#xff1a;使用函数【GROUP_CONCAT()】&#xff0c;代码为【SELECT am.activeId,GROUP_CONCAT(m.modelName SEPARATOR ‘,’) modelName】。【相关学习推荐&#xff1a;mysql学习】mysql合并行的方法&#xff1a;一个字段可能对应多条数据&#xff0c;用mys…

ubuntu 14 编译ARM g2o-20160424

1. 安装eigen sudo apt-get install libeigen3-dev sudo apt-get install libsuitesparse-dev sudo apt-get install libqglviewer-dev 对于ARM版本&#xff0c;可以下载http://eigen.tuxfamily.org&#xff0c;之后放置在toolchain可以找到的三方库位置处&#xff0c;我使用的…

将旧项目从Ant迁移到Maven的4个简单步骤

一段时间以来&#xff0c;我们一直在考虑将构建从蚂蚁移植到Maven。 它发生在上个月&#xff0c;实际上比我们预期的要简单。 根据我的经验&#xff0c;这里简要介绍了我们遵循的步骤。 我们的应用程序是一个具有多个框架和技术的企业Web应用程序构建&#xff0c;并作为单个WAR…

浅谈servlet与jsp的关系

servlet是用java语言编写的&#xff0c;是一个java类。主要功能是用来接受、处理客户端的请求&#xff0c;并把处理结果返回到客户端显示。Jsp是servlet发展后期的产物。在没有jsp之前&#xff0c;servlet利用输出流动态生成整个HTML页面&#xff0c;输出内容包括每一个HTML标签…

折腾Java设计模式之建造者模式

博文原址&#xff1a;折腾Java设计模式之建造者模式 建造者模式 Separate the construction of a complex object from its representation, allowing the same construction process to create various representations. 将复杂对象的构造与其表现分离&#xff0c;允许相同的构…

python小甲鱼练习题答案_小甲鱼Python第 013讲元组:戴上了枷锁的列表 | 课后测试题及参考答案...

测试题&#xff1a;0. 请用一句话描述什么是列表&#xff1f;再用一句话描述什么是元组&#xff1f;列表&#xff1a;一个大仓库&#xff0c;可以随时往里面添加和删除任何东西。元祖&#xff1a;封闭的列表&#xff0c;一旦定义&#xff0c;就不可改变(不能添加、删除或修改)1…

获得的经验:ActiveMQ,Apache Camel和连接池

每隔一段时间&#xff0c;我会遇到一个与ActiveMQ的连接和池相关的有趣问题&#xff0c;而今天&#xff0c;我想讨论一些并不总是很清楚的问题&#xff0c;并且在使用ActiveMQ和Camel JMS时可能会导致您大量饮酒。 并不是说您无论如何都不会在使用ActiveMQ和Camel时大量喝酒………

羊车门问题

题目描述&#xff1a;有3扇关闭的门&#xff0c;一扇门后面停着汽车&#xff0c;其余门后是山羊&#xff0c;只有主持人知道每扇门后面是什么。参赛者可以选择一扇门&#xff0c;在开启它之前&#xff0c;主持人会开启另外一扇门&#xff0c;露出门后的山羊&#xff0c;然后允许…

webapp优化

1. 优化前提&#xff1a; 业务架构与数据库设计 2. 单页web应用 &#xff1a; ExtJs backbone ng avalon 框架&#xff1a; React Native &#xff0c; ionic &#xff0c; Mui, metror,WeeX,device one Meteor(版本: 1.0) 的另一个特点是它会通过手机内存中运行的 mi…

高版本Sqlserver数据库导入低版本Sqlserver

今天想跑一个关于java网站的demo&#xff0c;结果在附加数据库项这一块出现问题&#xff0c;例程的数据库用的是sqlserver2014&#xff0c;而我的是2008&#xff0c;添加数据库出现错误。经过一番查找&#xff0c;也找到某人写的一些博客上的解决方案&#xff0c;不过不是很清楚…

mysql删除bin-log_删除MYSQl BIN-LOG 日志

1.查找当前有哪些二进制日志文件&#xff1a;mysql> show binary logs;-----------------------------| Log_name | File_size |-----------------------------| mysql-bin.000001 | 1357315 || mysql-bin.000002 | 117 || mysql-bin.000003 | 404002 ||…

WildFly 8与GlassFish 4 –选择哪个应用服务器

自从我上一个博客以来已经有一段时间了。 我显然忙于其他事情&#xff0c;包括我的主要工作。 在对应用服务器的正确选择提出更多疑问之后&#xff0c;是时候再次讨论这个话题并分享我的想法。 该博客上最常阅读的文章之一是有关选择哪种Java EE 6应用程序服务器的文章 。 我一…

Vue--- 一点车项目

一点车项目 cli脚手架 组件化 数据交互路由指向存入数据库 前端页面 cli脚手架的安装与搭建 创建对应包 页面组件化编辑 &#xff08;共享组件&#xff1a;摘取出来一模一样的组件重用&#xff09;&#xff08;私有组件:在自己的组件写入 引入共享组件&#xff09; 数据交…

设计模式:模式或反模式,这就是问题

我最近遇到了Wiki页面“ Anti-pattern” &#xff0c;其中包含详尽的反模式列表。 其中一些对我来说很明显。 他们中的一些让我想了一下&#xff0c;其他的让我想了更多。 然后&#xff0c;我开始在页面上查找反模式“ singleton”&#xff0c;但找不到。 &#xff08;文本搜索…