伪类:CSS伪类是用来添加一些选择器的特殊效果。
(1)a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
(2)伪类可以与 CSS 类配合使用:a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>
(3)“first-child”伪类来选择元素的第一个子元素,例:p:first-child{color:blue;} 将第一个p段落变蓝而其他不变。
8.伪元素:CSS伪元素是用来添加一些选择器的特殊效果。
(1)"first-line" 伪元素用于向文本的首行设置特殊样式。但只能用于块级元素。
(2)"first-letter" 伪元素用于向文本的首字母设置特殊样式。但只能用于块级元素。
(3)下面的例子会使所有 class 为 article 的段落的首字母变为红色。
p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>
(4)":before" 伪元素可以在元素的内容前面插入新内容。
例:在每个 <h1>元素前面插入一幅图片:h1:before{content:url(smiley.gif);}
":after" 伪元素可以在元素的内容之后插入新内容。
(1)a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
(2)伪类可以与 CSS 类配合使用:a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>
(3)“first-child”伪类来选择元素的第一个子元素,例:p:first-child{color:blue;} 将第一个p段落变蓝而其他不变。
8.伪元素:CSS伪元素是用来添加一些选择器的特殊效果。
(1)"first-line" 伪元素用于向文本的首行设置特殊样式。但只能用于块级元素。
(2)"first-letter" 伪元素用于向文本的首字母设置特殊样式。但只能用于块级元素。
(3)下面的例子会使所有 class 为 article 的段落的首字母变为红色。
p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>
(4)":before" 伪元素可以在元素的内容前面插入新内容。
例:在每个 <h1>元素前面插入一幅图片:h1:before{content:url(smiley.gif);}
":after" 伪元素可以在元素的内容之后插入新内容。
例:在每个 <h1> 元素后面插入一幅图片:h1:after{content:url(smiley.gif);}
附加:
导航用 ul+li 无序列表(ol+li 有序列表、dl+dt+dd 自定义列表)
<ul id="nav">
<li><a href="#" class="navActive">首 页</a></li>
<li><a href="#">培训课程</a></li>
<li><a href="#">优秀学员</a></li>
<li><a href="#">课程疑问</a></li>
<li><a href="#">职业生涯</a></li>
<li><a href="#">学员社区</a></li>
<li><a href="#">官方博客</a></li>
<li><a href="#">学员地址</a></li>
</ul>
#nav{ width:780px; height:54px; float:left; background:#393838; list-style:none;}
#nav li{ float:left;}
#nav li a{ display:block; width:86px; height:54px; line-height:54px; text-align:center;
font-size:12px; color:#CCCCCC; text-decoration:none; float:left;}
#nav li a:hover{ background:url(img/navHoverBg.png) no-repeat; color:#FFFFFF;}
#nav li .navActive{ background:url(img/navHoverBg.png) no-repeat; color:#FFFFFF;}
/*定义一个类选择器,专门加在处于激活状态的栏目上*/