css伪类与伪元素

来源：互联网发布：我的世界功能机java版编辑：程序博客网时间：2024/05/22 12:44

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的用法很多比如：

与CSS内容生成配合使用更多使用例子
–>生成半边文字
画三角形画三角形具体教程

0 0