W3School-CSS 伪类 (Pseudo-classes) 实例
CSS 伪类 (Pseudo-classes) 实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
- 轮廓(Outline)实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01超链接</title>
<style type="text/css">
body {
background-color: #99CCFF;
}
a:link {
color: #CCCCCC;
}
a:visited {
color: #666666;
}
a:hover {
color: #ffffff;
}
a:active {
color: #999999;
}
</style>
</head>
<body>
<p><b><a href="https://www.baidu.com/" target="_blank">百度首页</a></b></p>
<p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!</p>
<p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!</p>
<img src="love.jpg">
</body>
</html>
02超链接2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02超链接2</title>
<style type="text/css">
body {
background-color: #99ccff;
}
a.one:link {color: #666;}
a.one:visited {color: #333;}
a.one:hover {color: #ffffff;}
a.two:link {color: #666;}
a.two:visited {color: #333;}
a.two:hover {font-size: 150%;}
a.three:link {color: #666;}
a.three:visited {color: #333;}
a.three:hover {background-color: #CCCCCC;}
a.four:link {color: #666;}
a.four:visited {color: #333;}
a.four:hover {font-family: monospace;}
a.five:link {color: #666;text-decoration: none;}
a.five:visited {color: #333;text-decoration: none;}
a.five:hover {text-decoration: underline;}
</style>
</head>
<body>
<p><b><a class="one" href="https://www.baidu.com/" target="_blank">改变颜色</a></b></p>
<p><b><a class="two" href="https://www.baidu.com/" target="_blank">改变字体大小</a></b></p>
<p><b><a class="three" href="https://www.baidu.com/" target="_blank">改变背景颜色</a></b></p>
<p><b><a class="four" href="https://www.baidu.com/" target="_blank">As a man thinketh in his heart so is he!改变字体</a></b></p>
<p><b><a class="five" href="https://www.baidu.com/" target="_blank">改变文本装饰</a></b></p>
</body>
</html>
03超链接::focus 的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03超链接::focus 的使用</title>
<style type="text/css">
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<form>
<p>First name:
<input type="text" />
</p>
<p>Last name:
<input type="text" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
04 :first-child(首个子对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04:first-child(首个子对象)</title>
<style type="text/css">
p:first-child {
color: green;
}
li:first-child {
text-transform: uppercase;
}
</style>
</head>
<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
</body>
</html>
05 :lang(语言)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05 :lang(语言)</title>
<style type="text/css">
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中,在下面的例子中,:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型:</p>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
</body>
</html>
CSS 伪类 (Pseudo-classes) 总结
W3School-CSS 伪类 (Pseudo-classes) 实例的更多相关文章
- css 伪类选择器:checked实例讲解
css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...
- 谈谈css伪类与伪元素
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...
- CSS 伪类 (Pseudo-classes)实例
CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- [转] 用javascript修改css伪类的几种方法
用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...
- CSS:CSS 伪类(Pseudo-classes)
ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS 伪类
Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...
随机推荐
- Cesium应用篇:3控件(5)CesiumInspector
CesiumInspector控件并不是带来太多功能上的,但对开发人员来说,对于了解Cesium的渲染效果以及性能调优,还是一个很有价值的控件,特别是一些渲染状态下的问题,采用该控件,应该还是会有很多 ...
- ManagementClass类解析和C#如何获取硬件的相关信息
在.NET的项目中,有时候需要获取计算机的硬件的相关信息,在C#语言中需要利用ManagementClass这个类来进行相关操作. 现在先来介绍一下ManagementClass类,首先看一下类的继承 ...
- windows8.1 安装Redis
说点什么 现在互联网都在玩高大上的分布式缓存,或是分布式数据库,去面试的时候也会问些相关知识及应用场景,再没玩过就要out了. Redis官方只提供了Linux的版本下载,windows的需要去gi ...
- JavaScript代码模块化的正规方法
RequireJS-CommonJS-AMD-ES6 Import/Export详解 为什么起了一个这个抽象的名字呢,一下子提了四个名词分别是:RequireJS,CommonJS,AMD,ES6,答 ...
- MySQL数据迁移到SQL Server
数据迁移的工具有很多,基本SSMA团队已经考虑到其他数据库到SQL Server迁移的需求了,所以已经开发了相关的迁移工具来支持. 此博客主要介绍MySQL到SQL Server数据迁移的工具:SQL ...
- 通过Canvas + JS 实现简易时钟实战
最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...
- 什么是SARG ?
看书看到好几次这几个字母,每次都查,每次查完下次看到还忘记,还是得查. 简单的理解就是:sql查询语句查询过程中用到索引查找的是SARG写法 sql查询语句查询过程中未用到索引就是非SARG写法
- C#判断字符串是否是数字
/// <summary> /// 判断字符串是否是数字 /// </summary> public static bool IsNumber(string s) { if ( ...
- 利用SHELL脚本实现文件完整性检测程序(1.2版更新)
一..开发背景 因时势所逼,需要对服务器的文件系统实行监控.虽然linux下有不少入侵检测和防窜改系统,但都比较麻烦,用起来也不是很称手.自己琢磨着也不需要什么多复杂的功能,写个脚本应该就可以满足基本 ...
- Eclipse导入项目出现红色叹号的解决方法
情景: 我在另一台电脑开发Java Web项目,开发环境为 JDK 1.7,Tomcat v7.0,然后导入另一台电脑上,开发环境为为 JDK 1.8,Tomcat v8.0. 问题: 导入项目出现红 ...