赞
踩
伪类特点:为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的。
它可以用于:
- // 在a标签选择器后边加上 :hover 表示当鼠标悬浮在a 标签上时执行 {} 内css样式,a标签内容变为红色
- <style>
- a:hover{
- color: red;
- }
- </style>
-
-
- <body>
- <a href="http://www.baidu.com">百度一下</a>
- </body>
- // 在a标签选择器后边加上 :active 表示当a标签激活时,执行 {} 内css样式,a标签内容变为红色
- <style>
- a:active{
- color: red;
- }
- </style>
-
-
- <body>
- <a href="http://www.baidu.com">百度一下</a>
- </body>
- // 在a标签选择器后边加上 :visited 表示当a标签被访问过后的状态,执行 {} 内css样式,a标签内容变为红色
- <style>
- a:active{
- color: red;
- }
- </style>
-
-
- <body>
- <a href="http://www.baidu.com">百度一下</a>
- </body>
- // 在a标签选择器后边加上 :link 表示当a标签未被访问的状态,执行 {} 内css样式,a标签内容为红色
- <style>
- a:active{
- color: red;
- }
- </style>
-
- <body>
- <a href="http://www.baidu.com">百度一下</a>
- </body>
伪元素特点:伪元素也是元素,所以可以为它添加大部分其他元素具有的属性,比如定位属性,字体属性,背景属性和盒模型的属性等。另外由于伪元素默认是内联元素,所以如果要使得盒模型中的height等属性有效的话,必须要把它转化为块元素,具体就是设置其display属性为block,或者设置为float等。
它可以用于
选择器 | 例子 | 作用 |
::after | p::after | 在p元素最后位置加入内容 |
::before | p::before | 在p元素开始位置加入内容 |
::first-line | p::first-line | 选择p元素的首行 |
::first-letter | p::first-letter | 选择p元素的第一个字 |
注意:一些早期的伪元素曾使用单冒号的语法,所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容,支持早期的带有单双冒号语法的伪元素。
注意:在元素的 ::before和 ::after中插入内容 content属性(如果没有写content样式,伪元素会失效)
- .box::after{
- content: "";
- color: red;
- }
- .box::before{
- content: "";
- color: blue;
- font-size: 13px;
- }
- .box::first-line{
- background-color: pink;
- font-size:13px;
- }
- .box::first-letter{
- color: green;
- font-size: 13px;
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。