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的编码问题吧。。有一个问题网…

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…

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

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

折腾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…

Vue--- 一点车项目

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

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

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

Redis的散列类型

Redis是采用字典结构以key-value的形式存储数据的&#xff0c;在散列类型&#xff08;所谓的hash&#xff09;中的value也是一种字典结构。如果用关系表结构去理解&#xff0c;就是key为对象&#xff0c;value是属性和属性值。如下图&#xff1a; 所以使用散列&#xff08;hash…

easy html css tree 简单的HTML css导航树

code: show: 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

Java实现并发线程中线程范围内共享数据

---恢复内容开始--- 利用Map&#xff0c;HashMap键值对的数据结构&#xff0c;实现并发线程中线程范围内数据共享。 package cn.qy.heima2;import java.util.HashMap; import java.util.Map; import java.util.Random;public class ThreadScopeShareData {private static int …

18.11.16-高等数学-曲率计算

11.16 转载于:https://www.cnblogs.com/coder211/p/10005502.html

springboot干什么的_Spring Boot 项目的这些文件都是干啥用的?

上一讲我们用官网包或者 IDE 工具&#xff0c;快速构建了 Spring Boot 应用&#xff0c;并且看到了第一个程序的运行结果&#xff1a;Hello World&#xff01;本文我们了解下 Spring Boot 的目录结构&#xff0c;了解一个事物&#xff0c;清楚了它的结构&#xff0c;明白了内部…

微信小程序开发——点击按钮退出小程序的实现

微信小程序官方是没有提供退出的API的&#xff0c;但是在navigator这个组件中&#xff0c;是有退出这个功能的&#xff1a; 详情参考官方文档&#xff1a;navigator。 示例代码&#xff1a; 1 <navigator open-type"exit" target"miniProgram">关闭小…

使用RequestHandlerRetryAdvice重试Web服务操作

1.引言 有时在调用Web服务时&#xff0c;我们可能有兴趣在发生错误的情况下重试该操作。 使用Spring Integration时&#xff0c;我们可以使用RequestHandlerRetryAdvice类实现此功能。 此类将使我们在放弃并引发异常之前重试指定次数的操作。 这篇文章将向您展示如何完成此任务…

ASP.NET MVC如何做一个简单的非法登录拦截

摘要&#xff1a;做网站的时候&#xff0c;经常碰到这种问题&#xff0c;一个没登录的用户&#xff0c;却可以通过localhost:23244/Main/Index的方式进入到网站的内部&#xff0c;查看网站的信息。我们知道&#xff0c;这是极不安全的&#xff0c;那么如何对这样的操作进行拦截…

无法创建java虚拟机_创建java虚拟机失败的解决方法

创建java虚拟机失败的解决方法解决问题的步骤&#xff1a;1、从eclipse文件夹中打开eclipse.ini文件2、修改–launcher.XXMaxPermSize属性3、将值改为512m即可配置文件格式&#xff1a;-startupplugins/org.eclipse.equinox.launcher_1.3.0.v20120522-1813.jar--launcher.libra…