# 前言:
你的代码中是否每个标签都定义了一个类?完成一个页面后是否觉得代码很乱很拥挤?看见 github 优秀代码清爽简洁,想过你真的精通'CSS' 吗?想要进阶?不妨捡起 CSS 最容易被新手忽视与遗漏的模块:伪类 & 伪元素
CSS 伪类 [Pseudo-classes],用于向某些选择器提供特殊效果.
# 语法
伪类的语法:
selector:pseudo-class {property:value;}
配合 css 类使用:
链接有不同的状态,为了区分和提高用户体验,可以利用 css 伪类对链接不同状态显示不同的样式
selector.class: pseudo - class {
property: value;
} #锚 [anchor]伪类 - 链接
需要特别注意的是:
a:link { color: #ff0000; } /* 未访问的链接 */
a:focus { color: #00ff00; } /* 获得焦点的链接 */
a:visited { color: #0000ff; } /* 已访问的链接 */
a:hover { color: #ff00ff; } /* 鼠标划过链接 */
a:active { color: #ffcc00; } /* 点击时的链接 */
在 css 定义中,a:hover 是必须定义在 a:link 和 a:visited 之后才能生效【如果有】;
a:active 必须定义在 a:hover 之后才能生效【如果有】;
伪类名称对大小写不敏感,大小写均生效.
# 伪类配合 css 类使用
伪类不仅能跟在一个标签名后面,也能跟在样式类的后面.
<a class="linkme" href="css-syntax.html">css 语法</a>
<style type="text/css">
a.linkme:visited { color: #ff0000; }
</style>
# [CSS2] :first-child 伪类
在理解这个伪类的时候,走了不少误区,为了方便大家理解和自己回顾时更迅速捡起来,如下举例说明
假设有如下 html:
【分析】上面的例子中,能够作为 first-child 的元素有 行 2 的 p 元素,行 4 的 li 元素, 行 5 的 strong 元素, 行 8 的 em 元素;
. <div>
. <p>I am the first element</p>
. <ul>
. <li>I am the first li emelent</li>
. <li>some text <strong>here</strong> </li>
. <li>go on</li>
. </ul>
. <p><em>who</em> know what I am</p>
. </div>
如果给定以下规则:
则,行 2 的 p 元素的文案颜色将改成红色,行 4 的 li 元素文案将被加粗.
p: first - child {
color: red;
}
li: first - child {
font - weight: bold;
}
【误区】认为
p:first-child{ color:red; }
会将 p 元素的第一个子元素文案置红,其实不然.要明白,伪类都是对选择器自身进行加工.
【要点】必须声明 , 才能使 :first-child 在 IE 中生效.
【联想】学 :first-child 必定要想到 :nth-child(an+b) ;注意区分,:nth-child(1) 是用于对父元素的子元素索引进行查找,具体见后面 :nth-child(an+b) 模块
【经典案例】
1. 匹配 第一个 <p> 元素
该用例中,选择器匹配作为任何元素的第一个子元素的 <p> 元素
2. 匹配所有 <p> 元素中的第一个 <i> 元素
p: first - child {
color: red;
}
3. 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
p > i: first - child {
color: blue;
}
注意第二个例子的特殊用法.
p: first - child i {
color: lightgreen;
}
# [CSS2] :last-child 伪类
1. 匹配父元素中最后一个子元素 <p>
【提示】p:last-child 等同于 p:nth-last-child(1)
p: last - child {
color: aqua;
}
# [CSS3] :nth-child(an+b) 伪类 - 难点
【功能】选择每个指定元素匹配父元素中的第 an+b 个子元素,根据子元素索引选择,具有 bool 结果性质,如果匹配不上则样式表就不执行
【分析】对于该点「 菜鸟教程 」的部分解读有误,正确意思是:在
p: nth - child(2) {
color: azure;
}
元素所在的父元素的第二个子元素,如果是
元素,则加上样式内容,如果不是
元素,则跳过.
【经典案例】
1. 匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)
2. 匹配下标是 3 的倍数的所有 p 元素
p: nth - child(odd) {
background: aliceblue;
}
p: nth - child(even) {
background: antiquewhite;
}
【功能】匹配指定元素所在父元素中相同类型的第 n 个同级兄弟元素,根据类型选择,同样具有 bool 结果性质
p: nth - child(3) {
background: aquamarine;
}
# [CSS3] :nth-of-type(an+b) 伪类 - 难点
【分析】W3C 的解释还是很费解,"属于其父元素的第二个 p 元素的每个 p";我理解是:在 <p> 元素所在的不为 <p> 的父元素中,查找第二个 <p> 元素并为它加上样式表,且只作用于 p 内的行内元素中
p: nth - of - type(2) {
background: beige;
}
【特殊案例】为什么我觉得 W3C 的解释不太合理,注意如下这种情况:
来看看效果;
<div>
<p>line-1</p>
<p>line-2<span>line-2-1</span>
<P>line-2-2</P>
<P>line-2-3</P>
<div>line-2-4</div>
</p>
<div>line-3
<p>line-3-1</p>
<p>line-3-2</p>
<p>line-3-3</p>
</div>
<p>line-4</p>
</div>
// css code
p:nth-of-type(2) {
color:blueviolet;
}
p:nth-of-type(2) 的执行结果
关于该例,仁者见仁,智者见智,只要能正确理解并应用,一切你开心就好.
# [CSS3] :nth-last-child(an+b) 伪类
【功能】匹配指定元素的倒数第 an+b 个子元素
【案例】设置倒数第一个子元素的样式,比如去除底部边框
【案例】指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色:
p: nth - last - child(1) {
border - bottom: none;
}
# [CSS3] :nth-last-of-type() 伪类
【功能】匹配所有不是指定标签的元素
p: nth - last - of - type(2) {
background: #ff0000;
}
# [CSS3] :not(seletor) 伪类
【案例】设置不是 p 标签的元素的背景颜色
【功能】匹配所有没有子元素的指定元素
: not(p) {
background - color: cadetblue;
}
# [CSS3] :empty 伪类
【案例】设置所有没有子元素的
元素的背景颜色为 bisque
【功能】匹配带有指定 lang 属性开始的元素
p: empty {
background - color: bisque;
}
# [CSS2] :lang 伪类
以下案例会给声明了 lang 属性且值为 no 的 <q> 元素内容前后增加~符号.
< p > 前面的文字 < q lang = "no" > 段落中引用的文字 < /q></p >
q: lang(no) {
quotes: "~""~";
}
// html
CSS 伪元素 [Pseudo-elements],用于向某些选择器提供特殊效果
# 语法
伪元素的语法:
seletor:pseudo-element { property: value; }
配合 CSS 类使用:
【功能】用于向文本的首行设置特殊样式
selector.class:pseudo-element { property:value; }
# [CSS1] :first-line 伪元素
【经典案例】
【要点】:first-line 只能用于块级元素如
p: first - line {
color: #ff0000;
font - variant: small - caps; // 把文本设置成小型(文字比普通字体小)的大写字体,可选值:normal/small-caps/inherit
}
,和就不能用
【注释】以下属性能应用于 :first-line:
font / color / background / word - space / letter - spacing / text - decoration / vertical - align / text - transform / line - height / clear(用于清除浮动)
# [CSS1] :first-letter 伪元素
【功能】用于向文本的首个字母添加特殊样式
【要点】:first-letter 也只能用于块级元素如
p: first - letter {
color: #00ff00;
font - size: xx - large; // 还有这个值?见下方【拓展】
}
,和就不能用
【注释】还有以下属性能应用与: first-letter:
font / color / background / margin / padding / border / text - decoration / vertical - align(仅float为none时) / text - transform / line - height / float / clear(用于清除浮动)
【拓展】font-size 的多种可能值
<绝对大小> 有:
xx - small | x - small | small | medium | large | x - large | xx - large
<相对大小> 有:larger | smaller 相对于父元素
<长度> 如:16px;
<百分比> 如:100%; 相对于父元素
# [CSS2] :before 伪元素
【功能】 :before 伪元素可以在元素的内容前面插入新内容
【案例】在
标签前面插入文字.默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点.
如果想在元素上增加块,设置 content 为空,并增加样式即可,例如制作 loading 效果时即可使用该方法.
p:before {
content: '今日新闻:'
background-color: chocolate;
}
# [CSS2] :after 伪元素
【功能】:after 伪元素可以在元素的内容之后插入新内容
【案例】下面的例子在每个
元素后面插入一幅图片,与: before 一致,这个伪元素也是行内元素
本文尽可能列出了平时用到的所有伪类和伪元素,当然还有一些小众伪类并未给予说明,遇不到,还难记,不如写个简单的类实现.另外,如果本文有写的不对的地方,欢迎大家指正交流.
h1: after {
content: url(logo.gif);
}
# 后语
来源: http://www.jianshu.com/p/920bef39c122