css中除了常用的id(#),class(.),元素(p,body)等还有根据元素状态来分伪类和伪元素,之前用的不多,概念有点模糊,借此重新学习了解
伪类
- 最常见的:
:link,:visited,visited,:hover,:active
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 之后,才是有效的。
提示:伪类名称对大小写不敏感。
提示:为了保证伪类在 IE 中正常工作,声明 <!DOCTYPE>
。
:focus
:向拥有键盘输入焦点的元素添加样式。(常用于改变input输入框样式)
—> 默认: —>修改:
<style type="text/css">
input {
outline: none;
border: none;
border: 1px solid #ccc;
background-color: #ededee;
}
input:focus {
background-color: #fff;
box-shadow: 0 0 5px green;
}
</style>
<form>
<input type="text" name="name" placeholder="姓名">
</form>
:first-child
:向元素的第一个子元素添加样式。:lang
:向带有指定 lang 属性的元素添加样式。(表示没用到!!)
伪元素
:first-letter
向文本的第一个字母添加特殊样式。(常用于大字报)
–>:first-line
向文本的首行添加特殊样式。:before
在元素之前添加内容。(css3中为了与伪类区别使用::before
):after
在元素之后添加内容。(css3中为了与伪类区别使用::after
)
:before
,:after
的用法很多比如: