首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

链接lvha原则

*/} a:hover {/* 鼠标悬停链接样式 */} a:active {/* 被用户输入激活链接样式 */} 这5个都是伪类,表示5种状态,其中linkvisited是超链接专用...选择条件有两种: 状态:元素是否处于某种特定状态例如用户曾访问过(link/visited),此刻拥有焦点(focus),处于某种语言环境(lang) 结构:元素是否满足某种DOM结构方面的要求,例如身为长子元素...focus, hover, active对应状态起止条件: CSS没有定义哪些元素可以处于上面的状态,以及这些状态怎样进入和离开。...hover:active :visited:hover:active 展开之后就没有重叠状态了,让每条规则都变成严格互斥,自然就没冲突了 P.S.注意:因为IE6-不能正确处理组合伪类,只认最后一个,...所以lvha应用更广(实际上组合伪类语义更明确,没有“隐藏奇怪规则”) 另外,可以层叠规则来实现特殊效果,例如: // 用lhva实现只有未访问链接才有hover效果 a:link {} a:hover

3.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

CSS链接样式设计

而根据路径不同,超链接可以分为以下三类: 内部链接: 内部链接链接目标一般位于同一个网站中,对于内部链接来说,可以使用相对路径和绝对路径。...为超链接设计样式: 超链接状态有: (1)a:link -普通、未被访问链接 (2)a:visited -用户已访问链接 (3)a:hover -鼠标指针位于链接上方 (4)a:active...-链接被鼠标点击时 例如: a:link{color: aqua;} a:visited{color: aquamarine;} a:hover... 效果: 需要注意是,当为超链接设计样式时,必须按照以下规则: 1.a:hover必须位于a:link和a:visited之后。...除此之外,我们还可以装饰超链接下划线和背景色: background-color 属性规定链接背景色: a:link {text-decoration:none;} a:visited {text-decoration

1.3K10

php与dreamweaver基础教程,Dreamweaver基础教程 基础技巧全面接触

在文档窗口中选中声音文件标识,在属性面板点击Parameters就可以自行设定背景音乐循环次数、是否 自动播放等属性了,如图: 四、 美化篇 美化各种网页元素是一件既耗时又不一定出效果工作,下面我介绍几个技巧也许能帮你一点忙...文字链接一般有四个状态linkhover、active、 visited,我们通常都会对文字链接各个状态定义不同色彩和样式,经常有朋友发现自己定义样式在浏览时并未像设想那样。...主要原因是在样式表 中对链接定义顺序有一定要求,正确顺序是:A:link—A:visited—A:hover。...对一般朋友来说,其实很多时候只是想Hover状 态有变化,有个小技巧就是不按上面的方法定义链接样式,而只需定义a和a:hover状态样式即可,这样只有hover状态样式与其他状态不同。...例如我们可以将文字定义为黑色,而在Border选项中定义下划线为红色,如下图; 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/132457.html原文链接:https

84320

怎么设置超链接网址css,css应该怎么设置超链接样式「建议收藏」

大家好,又见面了,我是你们朋友全栈君。 css设置超链接样式方法是,给超链接添加伪类,例如【a:visited {color:#00FF00;}】。...如果我们要设置超链接样式,其实是可以使用任何一个css属性,比如颜色、字体、背景等等。但是如果你想设置特别的样式,就需要使用到伪类。下面我们一起来看下伪类。...提示:特别的链接可以有不同样式,这取决于他们是什么状态。...这四个链接状态是: a:link – 正常,未访问过链接 a:visited – 用户已访问过链接 a:hover – 当用户鼠标放在链接上时 a:active – 链接被点击那一刻 代码示例:...php中文网(php.cn) 这是一个链接 注意: a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。

3.2K10

前端学习(10)~css学习:选择器:伪类

如下: :link链接点击之前 :visited 链接被访问过之后 PS:以上两种样式,只能用于超链接。 (2)动态伪类:针对所有标签都适用样式。...如下: :link链接”:超链接点击之前 :visited “访问过”:链接被访问过之后 :hover “悬停”:鼠标放到标签上时候 :active “激活”: 鼠标点击标签,但是不松手时。...看一下这四种状态动图效果: ? 超链接美化 问:既然a{}定义了超链属性,和a:link{}定义了超链点击之前属性,那这两个有啥区别呢?...但是前端开发工程师在大量实践中,发现不写linkvisited也挺兼容。写法是: a:link、a:visited都是可以省略,简写在a标签里面。...也就是说,a标签涵盖了linkvisited状态(前提是都具有了相同属性)。

1.1K20

链接点击前后应用,包括背景、字体大小等等

**第一种方法:** **1.首先了解一下链接四种状态:** a:link - 普通、未被访问链接 a:visited - 用户已访问链接 a:hover - 鼠标指针位于链接上方...a:active - 链接被点击时刻 这四种状态可以直接用,但是请注意 当为链接不同状态设置样式时,请按照以下次序规则: a:hover 必须位于 a:link 和 a:visited...--通过background-color设置点击状态背景颜色--> a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85...hover {color:#ffcc00;} a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size...;} a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:'微软雅黑';}

93610

为什么是link-visited-hover-active

前言 通常我们在设置链接一些伪类(linkvisitedhover,active)样式时,要让不同状态显示正确样式,我们需要按一定顺序设置这些伪类样式。...正在 “点击” 未访问 链接可以与其中3个规则匹配 —— :link、:hover、:active,所以按照上面的声明顺序,:active将胜出,这可能就是我们所期望。...所有链接都必须要么是已访问(:visited),要么是未访问(:link),所以 :link 和 :visited 样式总是会覆盖 :hover 或者 :active。...当然链接样式也可以根据自己实际需要设定某一种顺序,比如 link-hover-visited-active 这样一个顺序,起到效果是 只有未访问链接会有悬停样式,已访问链接没有悬停样式。...以下规则可以任何顺序列出,而不必担心有什么负面影响: :link { color: blue; } :visited { color: purple; } :link:hover {

98250

10.超链接样式-CSS基础

(1)语法格式 a:link{...} a:visited{...} a:hover{...} a:active{...} ① 伪类 伪类 说明 a:link 定义a元素未访问时样式。...a:visited 定义a元素访问后样式。 a:hover 定义鼠标经过a元素时样式。 a:active 定义鼠标点击激活时样式。...Ⅰ.定义顺序 定义这四个伪类时,必须按照linkvisitedhover、active顺序进行,不然浏览器可能无法正常显示这4种样式。 这4种样式定义顺序不能改变。...超链接伪类示例1.jpg 2.深入了解超链接伪类 (1)实际开发 在实际开发中,不是每一个超链接都需要定义4种状态,我们只会用到两种状态:未访问时状态和鼠标经过状态(a:hover)。...二、深入了解:hover 1.适用于任何元素 :hover伪类不是只限于a元素,而是可以定义任何一个元素在鼠标经过时样式。

1.5K10

解析CSS伪类和伪元素常见用法和实例

伪类常见用法和实例解析 CSS伪类和伪元素是一种特殊类型选择器,可以用于在元素状态或者文档树中特定位置添加样式。它们允许开发者选择一个元素部分或者元素部分状态,从而改变它们样式。...下面将介绍一些常见伪类和伪元素用法和实例。 伪类: 伪类是一种特殊类型选择器,可以用于选择一个元素部分状态例如,当鼠标悬停在元素上时,可以使用伪类 :hover 来改变元素样式。...伪类和伪元素常见用法: * `:link`:用于未被访问过链接。 * `:visited`:用于用户已访问过链接。 * `:hover`:用于鼠标指针悬停在上面的元素。...实例: /* 未访问链接 */ a:link { color: blue; } /* 访问过链接 */ a:visited { color: purple; } /* 鼠标悬停时 *...希望本文能够对大家前端开发工作有所帮助。

13310

CSS基础笔记——超链接样式

在浏览器中,超链接默认情况下字体为蓝色,带有下划线,鼠标单击时字体为红色,单击后为紫色 而在CSS中,我们可以使用超链接伪类来定义超链接在鼠标单击不同时期样式 a:link{...} a:visited...定义四个伪类,必须按照linkvisitedhover、active顺序进行,不然浏览器可能无法正常显示这四种样式 BiliBili text-decoration:none表示去掉下划线 在实际开发中,并不是每一个超链接都必须定义这四种状态样式...,一般只会用到未访问和鼠标经过时状态 对于未访问时状态,我们直接针对a元素定义就行了,没必要使用a:link a{ color:red; text-decoration:none; }...a:hover{ color:blue; text-decoration:underline; } ---- 深入了解:hover 事实上,:hover伪类可以定义任何一个元素在鼠标经过时样式

1K10

【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )

文章目录 一、链接伪类选择器 1、语法说明 2、常用方式 3、代码示例 一、链接伪类选择器 ---- 1、语法说明 链接伪类选择器 可以 设置 链接文本 不同状态样式 : 未访问链接样式 :...默认样式 , 界面打开后 , 默认显示该样式 ; a:link 已访问链接样式 : 点击过链接 , 链接变成该样式 ; a:visited 鼠标移动到链接样式 : 鼠标移动到 链接 上方 , 链接变成该样式...; a:hover 选定链接样式 : 按下鼠标松开时 , 变成该样式 ; a:active 链接伪类选择器语法 : a:link { 属性名称:属性值; } a:visited { 属性名称:...同时设置样式等同于 a:link 链接伪类选择器 */ .nav a { color: gray; } /* :hover 链接伪类选择器 鼠标经过变成红色 */ .nav a...:点击过链接*/ a:visited { color: red; } /*鼠标移动到链接:鼠标移动到 链接 上方*/ a:hover { color: purple;

1K20

css超链接样式

一、超链接伪类简介 在所有浏览器中,超链接样式如下: 我们可以看出链接在鼠标点击不同时期样式是不一样。...语法: a:link{CSS样式} a:visited{CSS样式} a:hover{CSS样式} a:actived{CSS样式} 说明: 表1 使用伪类定义动态超链接 属性 说明 a:link...“linkvisitedhover、active”顺序进行,不然浏览器可能无法正常显示这4种样式。...在此学习了CSS超链接伪类,我们可以使用CSS伪类向文本链接添加复杂而多样样式。 3、深入了解超链接伪类 大家可能开始有疑问了,是不是每一个超链接都必须要定义4种状态样式呢?答案是否定。...未访问状态,我们直接在a标签定义就行了,没必要使用“a:link”。 语法: a{CSS样式} a:hover{CSS样式} 举例: <!

2.2K40

一篇文章带你了解CSS Pseudo-classes(伪类 )

CSS伪类允许设置元素动态状态样式,例如悬停,活动状态和焦点状态,以及文档树中现有但不能通过使用其他选择器作为目标的元素,而无需添加任何选择器它们ID或类。 例如,针对第一个或最后一个子元素。...语法 /*选择器:伪类{ 属性:值 ; }*/ 二、最常用伪类 锚伪类 使用 锚 伪类链接可以以不同方式显示。 这些伪类使可以对未访问链接进行样式化,而对访问链接进行样式化。...这些伪类更改了响应用户操作呈现链接方式。 : hover 当可被用于在用户将鼠标悬停在按钮上时改变按钮颜色用。 : active 当元素被激活或单击时适用。...注:为了使这些伪类很好地工作,必须按正确顺序将它们定义 - :link, :visited, :hover, :active, :focuss。...此选择基本语法可以与给予:nth-child(N),其中N是一个参数,其可以是一个数字,一个关键字(even或odd),或形式表达xn+y,其中x和y是整数(例如1n,2n,2n+1,...)。

2K10

《精通CSS:高级Web标准解决方案》 知识点汇总

已访问链接和未访问链接简写方式 a:visited:hover {color:#fff}; 子选择器在IE7和更高版本中均支持子,但在IE7中有一个小 bug,如果父元素和子元素之间有 HTML 注释...表示并不完善权宜之计 为了尽可能提高页面的可访问性,在定义鼠标悬停状态时,最好在链接上添加 :focus 伪类,再通过键盘移动到链接上是,这让链接显示样式与鼠标悬停时相同 在下面的例子中,两个规则具有相同特殊性...,所以 :link 和 :visited 样式将覆盖 a:hover 和 a:active 样式,为了确保不会发生这种情况,最好按照以下次序应用链式样式:a:link, a:visited, a:hover...,因此,默认情况下,链接是有下划线,但是,前端攻城狮们往往不喜欢链接下划线,因为下划线让页面看上去比较乱,如果决定去掉链接下划线,那么可以链接显示为粗体,当鼠标悬停在链接上或激活链接时,可以重新应用下划线...,从而增强其交互状态 a:link, a:visited { text-decoration: none; font-weight: bolder; } a:hover, a:focus

86441

全栈之前端 | 11.CSS3基础知识之列表链接学习

cursor 属性 - 设置鼠标指针悬停在元素上样式 :link 伪类 - 默认链接状态 :visited 伪类 - 已访问链接状态 :hover 伪类 - 鼠标停留选中链接状态 :focus 伪类...:visited 伪类 - 已访问链接状态 :hover 伪类 - 鼠标停留选中链接状态 :focus 伪类 - 键盘焦点选中链接状态 :active 伪类 - 点击访问链接状态 描述: 默认 a...例如: 默认链接样式为,具有下划线,未访问过 (Unvisited) 链接是蓝色, 访问过 (Visited) 链接是紫色, 而悬停 (Hover) 在一个链接时候鼠标的光标会变成一个小手图标...属性未访问 或 元素,注意 :visited 伪类和 :link 伪类是互斥 :link CSS 伪类会在用户访问链接后生效,出于隐私保护原因,使用该选择器可以修改样式非常有限...{ /* 激活段落 */ background: #eee; } 温馨提示: 链接状态伪类先后顺序被称为 LVHA 顺序通常后者会覆盖前者,其顺序为 :link — :visited — :

11110
领券