伪类和伪元素
伪类:CSS 伪类用于向某些选择器添加特殊的效果。
伪元素:CSS 伪元素用于向某些选择器设置特殊效果。
1、伪类:
(1)锚伪类::link \ :visited\ :hover\ :active
a:link{color: #FF0000}/* 未访问的链接 */
a:visited{color: #00FF00}/* 已访问的链接 */
a:hover{color: #FF00FF}/* 鼠标移动到链接上 */
a:active{color: #0000FF}
(2)伪类与css类
<a class="red" link=""> => a.red: visited {color: #FF0000}
(3) :first-child 伪类
例如:
1》匹配第一个p标签和第一个li标签
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
2》匹配所有 <p> 元素中的第一个 <i> 元素
p>i:first-child
3》匹配第一个p标签中的所有i标签
p:first-child i { }
(3):lang伪类
匹配lang为no的标签,添加引号
2、伪元素
(1)为首行添加样式=》:first-line 伪元素
(2)向文本的首字母艺添加样式: :first-letter 伪元素
(3)伪元素和 CSS 类 : p.article:first-letter{ color: #FF0000; } 上面的例子会使所有 class 为 article 的段落的首字母变为红色
(4)多重伪元素 首行+首字母
(5):before 伪元素 ":before" 伪元素可以在元素的内容前面插入新内容。
(6):after 伪元素 ":after" 伪元素可以在元素的内容之后插入新内容