UI伪类
元素处于某种状态时应用样式
伪链接类
a:link{color:black;}
链接的颜色本是黑色
a:visited{color:grey;}
链接被访问过后的颜色为灰色
a:hover{text-decoration:none;}
鼠标指向链接时无下划线
a:active{color:red;}
正在访问的链接为红色:focus伪类
input:focus{border:blue 1px solid;}
当光标位于input输入框时,输入框变为蓝色边框- :target伪类
#id1:target{background:grey;}
id1作为某个链接的终点,当点击链接转向ID为id1的元素时,该元素变为灰色背景
结构化伪类
元素具有某种结构化的关系(一组元素的第一个或最后一个)时,为该元素应用样式
- :first-child和:last-child
<ol class="cwc">
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
</ol>
则:ol.cwc:first-child{color:red}
“第一个元素”会变红色 - :nth-child
同上例:ol.cwc:nth-child(2){color:blue}
“第二个元素”会变蓝色
伪元素
- ::first-letter、::first:line、::before、::after
栗子:
<p class="cwc">是一个</p>
p.age::first-letter{color:red;} 第一个字变红
p.age::first-line{background:gery;} 第一行背景变灰
p.age::before{content:"陈大春";}
p.age::after{content:"大帅哥";}
效果:陈大春是一个大帅哥