手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >四种css 伪类选择器
四种css 伪类选择器
摘要:X:afterExampleSourceCode:.clearfix:after{content:“”;displa...

X:after

Example Source Code :

.clearfix:after {

content: “”;

display: block;

clear: both;

visibility: hidden;

font-size: 0;

height: 0;

}

.clearfix {

*display: inline-block;

_height: 1%;

}

我想上面这段代码,很多朋友都非常熟悉,是清理浮动时常用的hack方法。:after伪类与content结合使用,用于往元素类追加内容。:after伪类还有个妙用:用于产生阴影,点击这里查看。

X:hover

Example Source Code:

div:hover {

background: #e3e3e3;

}

hover在52CSS.com前面的文章中已经介绍过,IE6下只支持a的hover。

即使用border-bottom: 1px solid black; 要好于text-decoration: underline;

从实际的效果来看,使用border-bottom的距离比text-decoration来的合理,但使用border-bottom存在一些风险,比如颜色问题。

X:not(selector)

Example Source Code:

div:not(#container) {

color: blue;

}

否定伪类选择器,这还是比较好理解的,上述将会把非id为container的div的字体颜色设置为蓝色。

:not伪类IE8并不支持,IE9已经支持了。

X::pseudoElement

Example Source Code :

p::first-line {

font-weight: bold;

font-size: 1.2em;

}

伪类,用于给元素的片段添加样式,这如何理解呢?比如你要让一个段落的第一行的文字加粗,那么这个选择器是不二之选。

除此之外,你还可以给第一个字加上特殊样式,这个应用还是非常常见的

::Example Source Code

p::first-letter {

float: left;

font-size: 2em;

font-weight: bold;

font-family: cursive;

padding-right: 2px;

}

【四种css 伪类选择器】相关文章:

三种简洁的Tab导航(网页选项卡)

css串联选择器和后代选择器使用方法

对CSS3选择器的研究(详解)

css中的框架模

css教程:选择合适的、有意义的元素描述内容

学习css网页布局口诀

低权重原则——避免滥用子选择器

用css实现透视效果

使用css的类名交集复合选择器 让选择元素变简单

css如何设置层透明

精品推荐
分类导航