当前位置: 澳门新濠3559 > 编程 > 正文

4个伪类是有固定顺序的(LVHA),visited 设置 a 对象

时间:2019-12-27 17:08来源:编程
现在我有这样一个菜单 在CSS中,a标签有4种伪类,分别为: 超;链接就是a标签 class 和 id 的使用场景? id:指定标签的唯一标识。 class:指定标签的类名。 liahref="#"i/ip固定资产管理i/i/p/a

现在我有这样一个菜单

在CSS中,a标签有4种伪类,分别为:

超;链接就是a标签

class 和 id 的使用场景?

  • id:指定标签的唯一标识。
  • class:指定标签的类名。
liahref="#"i/ip固定资产管理i/i/p/aulliahref=""i/ip库房管理/p/a/liliahref="/admin/Assets/AssetsAllot"i/ip资产调拨管理/p/a/liliahref="/admin/Assets/AssetsInfo"i/ip资产信息管理/p/a/li/ul/li
a:link, a:visited, a:hover, a:active

1、伪类

同一个标签,根据用户的某种状态不同,有不同的样式,这就叫做“伪类”。

因为a标签要看用户有没有点击,有没有触碰,所以就叫做“伪类”。

伪类用冒号来表示:

a:link{

color:red

}

link:表示用户没有点击过这个链接的样式。

a:visited{

color:orange

}

visited:表示用户访问过这个链接的样式。

a:hover{

color:green

4个伪类是有固定顺序的(LVHA),visited 设置 a 对象在其链接地址已被访问过时的样式。}

hover:表示用户鼠标悬停的时候链接的样式。

a:active{

color:black

}

active:表示用户用鼠标点击这个链接但是不松手时的样式。

注意:link、visited、hover、active在CSS中必须按顺序写,如果不按顺序写,将起不到任何作用。

a标签在使用的时候,非常的难。因为不仅仅要控制a这个盒子,也要控制它的伪类。

我们一定要将a标签写在前面,:link、:visited、:hover、:active这些伪类写在后面。

a标签中,描述盒子; 伪类中描述文字的样式、背景。

澳门新濠3559 1

图1

所有的a不继承text、font这些东西。因为a自己有一个伪类的权重。

最标准的,就是把link、visited、hover都要写。

a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态。

澳门新濠3559 2

图2

id应用场景
  1. 根据提供的唯一id号,js可以快速获取标签对象。如:document.getElementById(id)
  2. 用于充当label标签for属性的值:示例:<label for='userid'>用户名:</label>,表示单击此label标签时,id为userid的标签获得焦点。
    特性:id属性的值,在当前的page页面要是唯一的。

如何用JS控制,点击上级菜单("固定资产管理")在标签"a"增加active的样式,然后点击下级菜单("库房管理")在标签"a"增加active的样式,求大师指导,前台比较菜

对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之外的效果。

class 应用场景

CSS操作,把一些特定样式放到一个class类中,需要此样式的标签,可以在添加此类。
特性:可以把多个类,放在一个class属性里,但必须用空格隔开;如:class='btnsubmit btnopen'

大部分人,都会用自己的方式,对这个顺序死记硬背。
熟记顺序,无疑是写样式时最快捷的方法,牛人们的记忆方法也是五花八门。
我见过有酱婶的:lv的包包hao,这倒是实话。
比较奇葩的,我在baidu上输入lvha,竟然自动关联出鹿晗。
还有歪果仁们,则戏称LvHa为爱恨原则。
记是记住了,但是疑惑也就来了,我知道这顺序一定是有说法的,本着往祖坟上刨的原则,下面就来探究一下,到底为什么。

CSS选择器常见的有几种?

  • 基础选择器
选择器 含义
* 通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)
#id id选择器,匹配特定id的元素
.class 类选择器,匹配class包含(不是等于)特定类的元素
element 标签选择器
  • 组合选择器
选择器 含义
E,F 多元素选择器,用,分隔,同时匹配元素E或元素F
E F 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
E>F 子元素选择器,用>分隔,匹配E元素的所有直接子元素
E+F 直接相邻选择器,匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否)
.class1.class2 id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素
element#id id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素
  • 属性选择器
选择器 含义
E[attr] 匹配所有具有属性attr的元素,div[id]就能取到所有有id属性的div
E[attr = value] 匹配属性attr值为value的元素,div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr ^= value] 匹配属性attr的值以value开头的元素
E[attr $= value] 匹配属性attr的值以value结尾的元素
E[attr *= value] 匹配属性attr的值包含value的元素
  • 伪类选择器
选择器 含义
E:first-child 匹配作为长子(第一个子女)的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
  • 伪元素选择器
选择器 含义
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

首先,我再把4个伪类的效果唠叨一遍:

选择器的优先级是怎样的?对于复杂场景如何计算优先级?

选择器的特殊性值表述为4个部分,用0,0,0,0表示。

  • ID选择器的特殊性值,加0,1,0,0。
  • 类选择器、属性选择器或伪类,加0,0,1,0。
  • 元素和伪元素,加0,0,0,1。
  • 通配选择器*对特殊性没有贡献,即0,0,0,0。
  • 最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。

a:link是a链接的默认样式,即a链接未被点击过时a标签内容在页面上呈现的视觉效果。
a:visited是a链接被访问过后的样式,即a链接被点击后a标签内容在页面上呈现的视觉效果。
a:hover是鼠标移动到a链接上面时的样式,即鼠标悬浮在a标签内容上方时,其在页面上呈现的视觉效果。
a:active是鼠标点击a链接时的样式,即从鼠标按键按下到鼠标按键弹起的过程中,a标签内容在页面上呈现的视觉效果。

a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?

a:link 设置 a 对象在未被访问前的样式。
a:visited 设置 a 对象在其链接地址已被访问过时的样式。
a:hover 设置 a 对象在其鼠标悬停时的样式。
a:acitve 设置 a 对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

未点击链接前,link伪类长期处于激活状态,鼠标悬停(或点击)时,a链接同时处于link和hover(或active)状态,由于它们特指度相同,在同时激活的情况下,后出现的伪类样式会覆盖前面的伪类样式,故link状态必须写在hover(或active)之前。再讨论hover和active的顺序,若把hover放在active后面,当点击链接一瞬,实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色,所以无法看到active的颜色。故hover在active之前其次,若把visited放在hover后面,那已访问过的链接一直触发着visited伪类,会覆盖hover样式。
所以正确顺序是a:link,a:visted,a:hover,a:active

我们来分析一下,一个a链接要发生所有的样式,是怎样一个过程:

以下选择器分别是什么意思?

澳门新濠3559 3

  • 首次进入页面时,a链接未被点击过,应该呈现a:link的效果,
  • 当鼠标移动到a链接上时,应该呈现a:hover的效果,
  • 当鼠标点击a链接时,应该呈现a:active的效果,
  • 最后,a链接应该呈现a:visited的效果。

    如果,a:link 写在 a:hover 之后,依据 CSS 层叠特性,a:link 将覆盖 a:hover 样式,鼠标移动到a链接上时a:hover将不会生效,这不是我们预期的效果,所以 a:link 要写在 a:hover 前。

    如果,a:link 写在 a:active 之后,同理,a:link 覆盖了 a:active 样式,鼠标点击a链接时,a:active 将不会生效,所以,a:link 要写在 a:active 前。

    如果,a:hover 写在 a:active 之后,那么,a:hover 讲覆盖 a:active 样式,要想点击a链接,一定会先经过鼠标移动到a链接之上这个步骤,所以,当点击a链接时,a:active 将不会生效,所以,a:hover 要写在 a:active 前。

    而 a:visited,跟 a:link 类似,它发生在 a:link 之后,a:hover 和 a:active 之前,它的位置,只能在第二位了。

列出你知道的伪类选择器

选择器 含义
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素

以上便是我们分析出的lvha顺序的由来。
希望通过这简短的文章,能让一些死记硬背的前端er理解,为什么要按照lvha顺序来写样式。因为在笔者的认知里,理解是最好的记忆方法。

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 (注意空格的作用)

div:first-child : 表示匹配div作为其父元素的第一个子元素
div :first-child : 表示匹配div标签下的第一个后代元素
div:first-of-type : 表示匹配div作为子元素第一次出现
div :first-of-type : 表示匹配div下第一个相同类型后代元素

澳门新濠3559,各位看官,您是否赞同我的认知呢?

运行如下代码,解析下输出样式的原因。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

输出结果:

澳门新濠3559 4

image.png

.item1:first-child{color: red;}类名为item1的第一个元素字体为红色
.item1:first-of-type{background: blue; 父元素div的下的p和h3第一子元素背景色为蓝色。

编辑:编程 本文来源:4个伪类是有固定顺序的(LVHA),visited 设置 a 对象

关键词:

  • 上一篇:没有了
  • 下一篇:没有了