利用这些选择器可以为文档中不一定具体存在的结构指定样式,或者为某些元素啥的状态所指示的幻象类指定样式。
伪类选择器因为浏览器更好的支持所以相对应用更加广泛,当已有元素处于某个状态时,为其添加对应的样式,状态根据用户行为而动态变化。
a:link , a:visited
a:focus,a:hover,a:active //动态伪类
建议顺序
link-visited-focus-hover-active //IE6只支持伪类选择超链接,IE7不支持对表单使用focus
p:first-child,:target突出显示当前活动的HTML 锚,:empty匹配没有子元素的元素
:valid匹配条件验证正确的表单元素
伪元素:创造出不存在的新元素 css3规定伪元素用双冒号,伪类单冒号
::before
::after 对于这两个而言属性content是必须设置的
eg:content:url('')
::first-letter/:first-letter 匹配元素中文本的首字母。被修饰的首字母不在文档树中
::first-line/:first-line 匹配元素中第一行的文本。这个伪元素只能用在块元素中,不能用在内联元素中。
::selection 匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。
伪类的效果可以通过添加一个类的样式来实现,但是伪元素的效果必须通过添加一个实际的元素才能实现。大概区别就是这些,常用的就是上面这些了,但是伪类的顺序由于会受到权重的影响可能会出现覆盖现象,具体还是多加考虑吧。