理解css伪类和伪元素
伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果
伪类
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
伪元素
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。
:Pseudo-classes
::Pseudo-elements
但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。
一些常用的css伪元素和伪类的用法
通过css3伪类选择器: :nth-child() 可以选择表格或li等有规律元素的偶数行。
odd表示奇数行,even表示偶数行;
tr:nth-child(odd) {background-color: #333;}
tr:nth-child(even) {background-color: #f9f9f9;}
使用first-child和last-child伪类设置最后和第一个元素:
table tr:first-child {background: #eee}
table tr: last-child{background: #eee}
li:nth-child(3)
background-color: yellow;
}
{ /找出相同一级中的li元素,然后再找出它们指定下标的那个元素,给它设置样式 , (例子:如上),注意:下标从1开始的/
p:nth-child(3n+4) {
background-color:red
}
/我们用:nth-child(even) 或者:nth-child(odd) 可以找出奇偶元素,但是假如我想每隔3个元素就变色呢?/
/3n表示每隔3个元素,4表示从第四个元素开始,每隔三个元素就将他们的颜色设为红色/
伪元素:before和:after用法
:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。
//html
<p>ello Worl</p>
//css
p:before{
content: "H" /*:before和:after必带技能,重要性为满5颗星*/
}
p:after{
content: "d" /*:before和:after必带技能,重要性为满5颗星*/
}