如何用CSS为链接设置不同样式

通常需要设置一些链接的样式来美化页面，网页设计中。链接的样式能设置很多种，但是如何能实现我想要的效果，那就需要设置样式的优先顺序，通常可以通过链接的一些伪类样式顺序来实现。下面，分享一下如何设置CSS链接样式。
要让不同的状态显示正确的样式，通常我设置链接的一些伪类（link，visited，hover，active）样式时。需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍，即 link-visited-hover-act可记为LoVe-HAte
首先我需要知道，要想弄明白为什么是这个顺序。CSS确定应当向一个元素应用哪些样式时，这通常不只需要考虑继承，还要考虑声明的特殊性，另外需要考虑声明自身的来源，这个过程就成为层叠。下面我分别来看看特殊性、继承和层叠这3种机制之间的关联。
特殊性
都知道一个元素可以通过多种选择器来进行选择，实际的应用中。如ID选择器、类选择器等等，具体可看CSS选择器详解。由不同选择器组成的选择元素的方式暂且称之为规则吧。考虑以下3对规则，当然每对规则都选择同样的元素：
h1{color:red;} bodih1{color:purple;} h2.grape{color:purple;} h2{color:silver;} html>boditabltr[id=”totals”]tdul>li{color:maroon;} li#answ{color:navy;}
每一对规则中只有一个胜出，显然。因为所匹配的元素只能是某一种颜色。那么怎么知道哪一个规则更强呢？
特殊性最高的规则将会胜出并被利用。这里先预留一个问题，答案就在于每个选择器的特殊性。通过计算选择器的特殊性值。如果特殊性相等的两个规则将如何确定应用？后面的层叠再介绍。
特殊性值
特殊性值表述为4个部分，如：0,0,0,0。一个选择器的具体特殊性如下确定：
对于选择器中给定的各个ID属性值，加0,1,0,0。对于选择器中给定的各个类属性值、属性选择或者伪类，加0,0,1,0。对于选择器中给定的各个元素和伪元素，加0,0,0,1。结合符和通配选择器 * 对特殊性没有任何贡献，加0,0,0,0。内联样式特殊性为1,0,0,0，因此内联声明的特殊性最高。标志为 !important 的声明并没有特殊的特殊性值，此时该声明为重要声明，超过所有非重要声明。
筱丶晓的个人博客：blog.sdxseo.com
就可以计算出本节刚开始介绍的3组规则的特殊性值及被应用的规则：通过以上的介绍。
h1{color:red;} bodih1{color:purple;} h2.grape{color:purple;} h2{color:silver;} html>boditabltr[id=”totals”]tdul>li{color:maroon;} li#answ{color:navy;}
继承
样式不只应用到指定的元素，基于继承机制。还会应用到后代元素。下面的例子帮你解继承是如何工作的
ul{color:red;}

ul下的第一个li
ul下的第二个li
ul下的第三个li

ol下的第一个li
ol下的第二个li
ol下的第三个li

效果：
ul下的第一个li
ul下的第二个li
ul下的第三个li
● ol下的第一个li
● ol下的第二个li
● ol下的第三个li
这个元素会采用该声明。然后将这个值再沿着文档树向下传播到后代元素，原理就是将声明 color:red;应用到ul元素时。并一直继承，直到再没有更多的后代元素继承这个值为止。值绝对不会向上传播，也就是说，元素不会把值向上传递到其祖先。
说明继承值很容易被其他方式中的声明取代。重要：继承值是完全没有特殊性的因此特殊性值为0,0,0,0特殊性也比其高。
层叠
特殊性一节中我预留了一个问题：如果特殊性相等的两个规则将如何确定应用？假设有以下规则：
h1{color:red;} h1{color:blue;}
都应当应用到元素，但这是不可能的因为一个元素不可能既是红色又是蓝色（实际是蓝色）因此这里层叠就出场了先看看层叠规则：哪一个会占上风？这两个规则的特殊性都是0,0,0,1所以它权重相等。
下面分别介绍规则中后三条规则。
按权重和来源排序
如果两个样式规则应用到同一个元素，根据第二条规则。而且其中一个规则有 !import标志，这个重要规则将胜出.
p{color:grai!important;}

Well, hello there!

效果：
Well, hello there!
还要考虑规则的来源。来源权重由大到小的顺序依次为：另外。
读者的重要声明（有 !important）
创作人员的重要声明（有 !important）
创作人员的正常声明
读者的正常声明
用户代理声明
按特殊性排序
如果向一个元素应用多个彼此冲突的声明，根据第三条规则。而且它权重相同，则按特殊性排序，最特殊的声明最优先。
p#bright { color: silver; } p { color: black; }

Well, hello there!

效果：
hellothereWell.!
按顺序排序
根据第四条规则，最后。如果两个规则的权重、来源和特殊性完全相同，那么在样式表中后出现的一个会胜出。
h1{color:red;} h1{color:blue;}

蓝色的标题1

效果：
蓝色的标题1
链接样式顺序
想大家应该基本了解CSS如何确定应当向一个元素应用哪些值的回到前言说到链接样式顺序，好了通过前面的介绍。为了正确的表示所设置的样式，必需按一定的顺序进行样式设置。根据CSS2规范中的推荐顺序，即 link-visited-hover-act声明样式如下：
:link{color:blue;}:visit{color:purple;}:hover{color:red;}:activ{color:orange;}
根据之前的介绍，以上这些选择器的特殊性都是一样的：0,0,1,0。因此他有相同的权重、来源和特殊性，因此与元素匹配的最后一个选择器才会胜出。
:activ将胜出，正在点击”未访问链接可以与其中3个规则匹配 :link:hover:activ所以依照上面的声明顺序。这可能就是所期望的
假设我忽略这种常用的顺序，而是按字母顺序排列链接样式。声明样式如下:
:activ{color:orange;} :hover{color:red;} :link{color:blue;} :visit{color:purple;}
按照这种顺序，任何链接都不会显示 :hover 或者 :active，因为 :link 和 :visited 规则后出现。所有链接都必须要么是已访问（:visited），要么是未访问（:link），所以 :link 和 :visited 样式总是会覆盖 :hover 或者 :active。
比方 link-hover-visited-act这样的一个顺序，当然链接样式也可以根据自己的实际需要设定某一种顺序。起到效果是只有未访问的链接会有悬停样式，已访问的链接没有悬停样式。
由于可以把伪类链接起来，最后。所以可以不必担心这些问题。以下规则可以任何顺序列出，而不必担心有什么负面影响：
:link{color:blue;} :visit{color:purple;} :link:hov{color:red;} :visited:hov{color:gray;} :link:act{color:orange;} :visited:act{color:silver;}
结语
希望协助大家能加深了解CSS确定应当向一个元素应用哪些样式时的一些基本原理。通过对链接样式顺序为什么是link-visited-hover-act解答。
文章来自：http://blog.sdxseo.com/cssbiji/2018080667.html

如何设置CSS链接样式相关推荐

css链接样式_如何在CSS中设置链接样式
css链接样式样式链接 (Styling Links) Links can be styled with any CSS property, such as color, font-family, ...
css链接样式_CSS中的样式链接
css链接样式 CSS样式链接 (CSS Styling Links) The links in CSS can be styled in various ways to make our websi ...
php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
html正方形边框颜色,css边框颜色样式设置 css border颜色
DIV CSS边框颜色样式设置改变 css border边框样式可设置边框宽度.边框样式(css边框虚线.css边框实线).颜色样式.而css边框颜色只有设置边框宽度,设置边框颜色才能实现. 一.快速 ...
【CSS3】CSS——链接
CSS链接样式属性描述 a:link 普通的.未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方 a:active 链接被点击的时刻 1.a:link ...
css自定义横向滚动条样式,css滚动条样式自定义
很简单的几行代码 Title * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; ...
CSS 设置链接样式
使用标签定义了一个超链接,点击其中的文本可以跳转到蚂蚁部落首页. 链接是HTML中最为重要的元素之一,犹如一个超时空飞船,实现了页面之间或者站点之间的跳转. 所以对于超链接样式的设置也是比较重要的操作 ...
jquery 设置css样式
$("#61dh a").css('color', 多个样式属性 var divcss = { background: '#EEE', width: '478px', margin ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

如何设置CSS链接样式

如何用CSS为链接设置不同样式

蓝色的标题1

蓝色的标题1

如何设置CSS链接样式相关推荐

最新文章

热门文章