第9章 定义选择器

2018-03-01 18:06:26 《HTML5与CSS3基础教程》笔记 阅读: 115 评论:

[TOCM]

标签选择器

直接指定标签名称进行选择

类选择器

使用点"."+和类名称进行选择

id选择器

使用井号"#"+id名称进行选择

后代选择器

使用空格选择后代标签

后代选择器对于祖先的所有后代都起作用,不论是第几代

子选择器

使用">"选择直接后代标签

子选择器只对于祖先的直接后代(第一代)起作用

同胞选择器

使用加号"+"选择有同一祖先的后一个标签(他们之间没有其他标签)

普通同胞选择器

使用"~"选择有同一祖先的出现在后面的标签(他们可以直接相邻也可以不直接相邻)

选择标签的第一个或者最后一个

使用":first-child"选择该标签的第一个标签

使用":last-child"选择该标签的第一个标签

选择标签的第一个字母或第一行

使用":first-latter"选择该标签的第一个字母

使用":first-line"选择该标签的第一行

按状态选择链接标签

  • a:link 选择未被激活的链接
  • a:visited 选择已经访问过的链接
  • a:foucus 选择使用键盘选择且拥有焦点的链接
  • a:hover 选择光标下的链接
  • a:active 选择激活但页面未跳转时的链接
    由于晚出现的规则会影响覆盖前面的,所以应该按上面列表的顺序(LVFHA或LVHFA)来定义规则

按属性选择标签

  • [attr] 匹配指定标签
  • [attr="value"] 完全匹配指定属性值
  • [attr~="value"] 属性值是以空格分割的多个单词,其中有一个完全匹配指定值
  • [attr|="value"] 属性值值以value-开头
  • [attr^="value"] 属性值以value开头,value为完整的单词或者一部分
  • [attr$="value"] 属性值以value结尾,value为完整的单词或者一部分
  • [attr*="value"] 属性值为指定值的子字符串

标签组选择器

即将相同的样式运用到多个选择器,选择器之间用逗号隔开

组合

各种选择器可以相互组合,但注意以简单为主


功能
最新评论