`
conkeyn
  • 浏览: 1508959 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

第2章 选择器 =>伪类和伪元素 P57

    博客分类：
  • CSS
浏览器XHTMLCSSHTMLWeb 
阅读更多

利用伪类选择器和伪元素选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所指示的幻像类指定样式。换句话说，会根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。

伪类名 描述
:link 指示作为超链接（即有一个href属性）并指向一个示访问地址的所有锚。注意，有些浏览器可能会不正地将:link解释为指向任何超链接，包括已访问和未访问的超链接。
:visited 指示作为已访问地址超链接的所有锚。

 

 

 

 

 

 

 

动态伪类：


伪类名称 描述
:focus 指示当前用有输入焦点的元素，也就是说，可以接受键般输入或者能以某种方式激活的元素。
:hover 指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上，:hover就会指示这个超链接。
:active 指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。

 

 

 

 

 

 

 

 

 

类似于:link和:visited，这些伪类最常用于超链的上下文中。很多web页面都有类似的样式：

a:link{color:navy}

a:visited{color:gray}

a:hover{color:red}

a:active{color:yellow}

前两个规则使用静态伪类，后两个利用动态伪类。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接伪类</title>
<style type="text/css">
/* unvisited links are blue*/
a:link{
	color:blue;
}
/* visited links are purple*/
a:visited{
	color:purple;
}
input:focus{
	background:silver;
	font-weight:bold;
}
textarea:focus{
	background:silver;
	font-weight:bold;
}
</style>
</head>

<body>
<a href="#">link</a><br/>
<input type="text" name="text1"/><br/>
<textarea name="textarea1"></textarea>
</body>
</html>

显示效果：

 

  • 大小: 1.5 KB
  • 大小: 1.6 KB
分享到：
| 第2章 选择器 =>选择相邻兄弟元素P56
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS伪类和伪元素的区别详解

    可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 伪类种类 伪元素种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行...

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    （5）伪类选择器（只用于链接 用：表示） a:link 未访问过的链接 a:visitied 已访问过的链接 a:hover 选择鼠标经过的链接/悬停时链接 a:active 选择的是鼠标正在按下没有弹起的链接 注意：按照LVHA的顺序写 ...

    css介绍快速学习

    c)伪元素选择器 其实就在html中预先定义好的一些选择器。称为伪元素。（CSS的术语） 格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。 a:link 超链接未点击状态。 a:visited 被访问后的状态。 a:hover ...

    css笔记课程笔记2019，5，22

    （3）伪元素选择器(了解，浏览器的兼容性比较差) * css里面提供了一些定义好的样式，可以拿过来使用 * 比如超链接 ** 超链接的状态 原始状态 鼠标放上去状态 点击 点击之后 :link :hover :active :visited ...

    前端css+html+布局笔记

    伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置 :link 表示一个普通的链接（未访问过的链接） :visited 表示访问过的链接 :hover 鼠标移入的链接，也可以为其他元素设置hover :...

    css入门笔记

    选择器：伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配尚未访问的超级链接状态 :visited 匹配访问过的元素的状态 2.动态伪类 :hover 匹配鼠标悬停在元素上时的状态 :active匹配鼠标激活时元素的状态 ...

    amazing-css::gem_stone: 一些惊人的 css 样式和选择器

    一些 CSS 技巧一些惊人的 css 样式和选择器。CSS 伪元素它们用于为元素的指定部分设置样式。1. ::之前::before伪元素可用于在元素内容之前插入一些内容。 p::before{ content: "before contents",}2. ::之后::after...

    css3高级选择器使用方法

    css3属性选择器 css3之属性选择器，其中包括： 复制代码代码如下:1.[att=val]2.[att*=val]3.[att^=val]4.[att$=val] 下面我将用实例演示它们的用法 css代码： 复制代码代码如下:&lt;...结构性伪类选择器 1.伪

    Redrock_FrontEnd_Exam:学员第一学期考核试题

    Ling:子代选择器, 以及选择器的优先级.margin 百分比计算值.*liuhuizhi:+ 请将文字和图片垂直居中Java:请画出div盒模型Grallencss的基本使用chenqinyu:写一段css，将1的颜色变为红色(不要改变html) &lt;p&gt;1&lt;/p&gt; &lt;p&gt;1&lt;/p...

    c# 加密和解密相关代码

    在第二个GroupBox 中放入一个TextBox 控件和一个Button 按钮，分别用于显示 解密后的信息和计算解密信息。 （3）程序主要代码如下： private void btn_Encrypt_Click(object sender, EventArgs e) { int P_int_Num, ...

    c#学习笔记.txt

    详细介绍请参阅rainbow（一个长着胡子的彩虹）翻译的展现C#&gt;&gt; ，前几章非常的有趣。 看完了前面几段，我的朋友提出了不同的意见：C#不是Java的Clone,它只是长得有些像Java而已，其实面向对象、中间语言什么的也...

    LINGO软件的学习

    &2可看作派生集的第2 个原始父集的索引，它取遍该原始父集的所有成员；&3，&4，……，以此类推。注意如果派生集B的父集是另外的派生集A，那么上面所说的原始父集是集A向前回溯到最终的原始集，其顺序保持不变，并且...

    文章管理系统

    2.[改进]为了系统安全和稳定去掉宇初验证码和印象码，加入4种数字验证码、1种中文验证码、1种计算题验证码供用户选择 3.[改进]为了后台系统安全，后台登录页不用判断是否已登录状态并自动跳转到管理页 4.[改进]后台...

    《计算机操作系统》期末复习指导

    第二章 用户与操作系统的接口 1、基本概念 作业(Job)是让计算机完成一件事或任务，可大可小，可多可少。 作业步(Job steps) ：作业顺序执行的工作单元。 作业流(Job Stream) ：作业步的控制流程。...

    北语15春《计算机科学导论》作业3.doc

    北语15春《计算机科学导论》作业3全文共9页，当前为第2页。 北语15春《计算机科学导论》作业3全文共9页，当前为第3页。 北语15春《计算机科学导论》作业3全文共9页，当前为第4页。 北语15春《计算机科学导论》作业3...

Magicbox
Global site tag (gtag.js) - Google Analytics