伪类使用技巧


伪类与伪元素

关于伪类,大家最早接触的肯定是a:hover了,但是不止如此,还有很多其他的伪类。另外,伪类与伪元素也是不同的。伪元素最近用的比较多,做一些效果还是挺不错的,可以有效避免增加DOM元素。这里主要总结一下伪类与伪元素的用法。

伪类使用技巧

转载请注明出处:http://www.fed123.com/2014/09/08/2014_css1/

伪类

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
:link,伪类将应用于未被访问过的链接,与:visited互斥。
:hover,伪类将应用于有鼠标指针悬停于其上的元素。
:active,伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。
:visited,伪类将应用于已经被访问过的链接,与:link互斥。
:focus,伪类将应用于拥有键盘输入焦点的元素。
:first-child,伪类将应用于元素在页面中第一次出现的时候。
:last-child,选择属于其父元素最后一个子元素
:nth-child(n),选择属于其父元素的第n个子元素
:lang,伪类将应用于元素带有指定lang的情况。
参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<meta content="text/html"charset="utf-8" />
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
div:first-child {
background:#0F0;
}
textarea:focus {
background:#F00;
}
div:lang(zh) {
background:#00F;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div>
<textarea></textarea>
</div>
<div>
<textarea></textarea>
</div>
<div lang="zh">
<textarea></textarea>
</div>
</body>
</html>

需要注意的是在CSS的定义中,同一个元素的:hover必须位于:link、:visited之后才能生效,:active必须位于:hover之后才能生效

伪元素

与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
::first-letter,伪元素的样式将应用于元素文本的第一个字(母)。
::first-line,伪元素的样式将应用于元素文本的第一行。
::before,在元素内容的最前面添加新内容。
::after,在元素内容的最后面添加新内容。

伪类与伪元素区别

平常为了保证浏览器的兼容性,使用伪类和伪元素都可以使用单冒号,

1
p:before {}

不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写。过于老的浏览器可能会存在支持问题,不过伪元素大多是配合 CSS3 使用,就无所谓向下兼容了:

1
img::after {}

这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。比较有用的是以下几个值:

[String]

使用引号包括一段字符串,将会向元素内容中添加字符串

1
a:after { content: "↗"; }

attr()

调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:

1
a:after { content:"(" attr(href) ")"; }

url() / uri()

用于引用媒体文件。示例:

1
h1::before { content: url(logo.png); }

counter()

调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:

1
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

需要注意:伪元素如果没有设置“content”属性,伪元素是无用的。

常用技巧

清除浮动

如果父元素容器里面的子元素是浮动元素的话,我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起,但是这种方法引入了多余的无意义标签,并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS,所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没,只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现:(via Nicolas Gallagher)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}

添加引号

许多人喜欢给 blockquote 引用段添加巨大的引号作为背景,这种时候我们就可以用 :before 来代替 background 了,即可以给背景留下空间,还可以直接使用文字而非图片:

1
2
3
4
5
6
7
8
9
blockquote::before {
content: open-quote;
position: absolute;
z-index: -1;
color: #DDD;
font-size: 120px;
font-family: serif;
font-weight: bolder;
}

特效

CSS实现的八卦图案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

悬浮出现方括号

伪类使用技巧
鼠标移上链接,出现方括号:

1
2
3
4
5
6
7
8
9
10
11
12
13
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "/5B"; left: -20px; }
a:hover::after { content: "/5D"; right: -20px; }

同样,我们只需要配合 display: block 和 position: absolute ,就可以将其当成两个容器,拼合成悬浮出现双边框的特效:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 0 10px;
}
/* 大框 */
a:hover::before, a:hover::after {
content: "";
display: block;
position: absolute;
top: -15%%;
left: -14%%;
width: 120%;
height: 120%;
border-style: solid;
border-width: 4px;
border-color: #DDD;
}
/* 小框 */
a:hover::after {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-width: 2px;
}

jQuery选择器

参考jQuery的选择器手册:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

谢谢!

转载请注明出处:http://www.fed123.com/2014/09/08/2014_css1/

欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

未经允许不得转载:皓眸大前端 » 伪类使用技巧

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址