css超链接下划线

css超链接下划线往下隔开一段距离的两种实现方法

css underline style  without text-decoration

经常使用的超链接的CSS样式,带下划线通常采用”text-decoration:underline” 普通情况下,很好用,但是当字体加粗或者对h1~h3比较大的字体加下划线时,会发现下划线与超链接连在一起,很不雅观。于是便有了将超链接下划线与文本链接往下隔开一段距离的要求。这里采用的是用首先设置text-decoration:none,然后设置border-bottom,只需设置为solid 即可,最后padding-bottom往下隔开一段像素距离如3px,可以完美实现将下划线往下隔开一段距离的要求。

a.cls-underline-1{

Continue reading »css超链接下划线

CSS的优先级特性Specificity

如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
它可能不像其它那么重要,大部分案例你不需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。
选择器一样的情况下后面的会覆盖前面的属性。比如:

p { color: red; }
p { color: blue; }
p元素的元素将是蓝色,因为遵循后面的规则
然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如: Continue reading »CSS的优先级特性Specificity

CSS specificity优先级规则

关于CSS specificity
CSS specificity 特性或称非凡性,它是衡量个衡量CSS值优先级个标准,既然作为标准,就具套相关判定规定及计算方式,specificity用数字串(CSS2是位)来表示,更像个级别,值从左到右,左面级,数位之间没进制,级别之间可超越。
Continue reading »CSS specificity优先级规则

CSS Specificity: Things You Should Know(转)

Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector.

CSS Specificity isn’t simple. However, there are methods to explain it in a simple and intuitive way. And that’s what this article is all about. You’ll understand the concept if you love Star WarsReally.

Let’s take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources. Continue reading »CSS Specificity: Things You Should Know(转)

超链接css样式优先级

超链接的样式,例如 hover,visited,active样式 定义会出现没有实际效果的情况,实际上为了保证能看到不同状态下的连接样式,正确的样式顺序应该是:

” link – visited – hover – active “或” LVHA “(缩写)。

分析原因:

每个选择符selector都有一个“specificity” 权重,如果两个selectors应用于同一个元素,具有较高specificity的选择符将胜出,具有优先权。例如:

P.hithere {color: green;} /* specificity = 1,1 */

P {color: red;} /* specificity = 1 */

任何设置了类class=hithere的段落内容显示为绿色而不是红色。两个selectors都设置了颜色,但是具有更高specificity的选择符将胜出。

伪类如何影响specificity呢?它们具有完全相同的加权值,下列样式具有相同的specificity加权值: Continue reading »超链接css样式优先级