伪类用于给特定状态下的元素添加样式,常见的伪类有:hover、:active、:focus等。
a:hover { text-decoration:underline; }
上述代码表示当鼠标悬停在链接上时,链接文字会有下划线效果。
伪元素则用于给特定位置的元素添加样式,常见的伪元素有::before和::after等。
p::before { content:""; display:block; height:10px; background-color:#ccc; }
上述代码表示在每个段落的前面添加一个高度为10像素、背景为灰色的空块。
需要注意的是,伪元素只存在于元素的虚拟树中,并不会直接影响到DOM树或布局。
总的来说,CSS3的伪类和伪元素为Web设计师提供了更多的样式选择器,可以让页面更加丰富多彩。