CSS选择器

复合选择器

选择器名称示例意义
后代选择器.box .spec选择类名为box的标签内部的类名为spec的标签
交集选择器li.span选择即是li标签,也属于spec类的标签
并集选择器ul,ol选择所有有ol,ul标签

后代选择器

CSS选择器中,使用空格表示“后代”
后代

交级选择器

交集
表示选择h3标签的class属性是boxstyle的标签

h3.boxstyle{
    font-size:30px;
}

并集选择器

并集

伪类

伪类是添加到选择器的描述词语,指定要选择的元素特殊状态,超级链接有4种状态

a标签伪类

伪类意义
a:link没用被访问的超级链接
a:visited已经被访问过的超级链接
a:hover正被鼠标悬停的超级链接
a:active正被激活的超级链接(按下按键但是还没有松开按键)

a标签的伪类顺序书写要按照“爱恨准则”的顺序,否则会有伪类不生效的情况

==L==O==V==E ==H====A==TE 爱恨准则

:link > :visited >:hover>:active

css3新增伪类

伪类意义
:empty选择空标签
:focus选择当前获得焦点的标签
:enable选择当前有效的表单元素
:disabled选择当前无效的表单元素
:checked选择当前已经勾选的单选按钮或者复选框
:root选择根元素,即<html>标签

伪元素

  • 伪元素表示虚拟动态创建的元素
  • 伪元素用双冒号表示,ie8兼容单冒号

::befor (之前)

::befor 创建一个伪元素,其将成为匹配选中的元素第一个子元素,必须设置content属性表示其中显示的内容

a::before{
    content:"♥";
}

效果则是每个a链接的文字前面会出现♥
如:♥百度

::after(之后)

a::after{
    content:"♥";
}

效果则是在每个a标签链接的文字后面出现♥
如:百度♥

::selection

::selection CSS伪元素应用于文档中被用户使用鼠标圈起的高亮部分

::first-letter

::first-letter会选中某元素中(必须是块级元素)第一行的第一个字母

::first-line

::first-line会选中某元素中(必须是块级元素)第一行全部文字

发表评论