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) 实例的更多相关文章

  1. css 伪类选择器:checked实例讲解

    css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...

  2. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...

  3. CSS 伪类 (Pseudo-classes)实例

    CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...

  4. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  5. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  6. CSS：CSS 伪类(Pseudo-classes)

    ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...

  7. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  8. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  9. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  10. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

随机推荐

  1. JQuery中使用Ajax实现诸如登录名检测等异步请求Demo

    上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册 ...

  2. 轻松搞定Win8 IIS支持SVC 从而实现IIS寄宿WCF服务

    写在前面 为了尝试在IIS中寄宿WCF服务,需要配置IIS支持SVC命令,于是便有了在DOS命令中用到ServiceModelReg.exe注册svc命令. 坑爹的是注册成功后就开始报错.无奈之下两次 ...

  3. 【LeetCode】Verify Preorder Serialization of a Binary Tree（331）

    1. Description One way to serialize a binary tree is to use pre-order traversal. When we encounter a ...

  4. Web App 向上滑动动态加载数据 2015-06-11 09:36 20人阅读 评论(0) 收藏

    好久没有写博客了 - - ,个人原因 个人原因..  宣传一下...自己的.NET群:252713569 欢迎各位大神加入 嗯..最近在公司开发微信平台的东西..需要做一个WebAPP(PS:其实就是 ...

  5. [Java 基础]控制语句

    选择语句 if语句 if语句会判断括号中的条件是否成立,如果成立则执行if语句中的代码块,否则跳过代码块继续执行. 语法 if(布尔表达式) {    //如果布尔表达式为true将执行的语句 } 例 ...

  6. 机器学习 1 linear regression 作业(二)

    这个线性回归的作业需要上传到https://inclass.kaggle.com/c/ml2016-pm2-5-prediction 上面,这是一个kaggle比赛的网站.第一次接触听说这个东西,恰好 ...

  7. 20 个看起来很棒的 Web UI 工具包

    程序员们比设计师更需要这些 UI 方面的内容: 1. Mini Reminders Mini Reminders 2. Transluscent UI elements Transluscent UI ...

  8. 写出好的 commit message

    为何要关注提交信息 加快Reviewing Code的过程 帮助我们写好release note 5年后帮你快速想起来某个分支,tag或者 commit增加了什么功能,改变了哪些代码 让其他的开发者在 ...

  9. Redis两种持久化方式(RDB&AOF)

    爬虫和转载请注明原文地址;博客园蜗牛:http://www.cnblogs.com/tdws/p/5754706.html Redis所需内存 超过可用内存怎么办 Redis修改数据多线程并发—Red ...

  10. NIOS II 中直接调用Modelsim仿真

    STEP1:创建一个工程,实现并编译该工程,编写TestBench文件. STEP2:设置启动Modelsim的路径 选择Nios II菜单Tools->Options..,在弹出的界面中,选择 ...