CSS常用选择器

CSS 选择器

基本选择器

通配符选择器 --> *

• 对默认样式进行标准化

• 语法:

  * {
      CSS 样式;
  }
  

element

• 标签选择器

• 设定某元素的样式

• 语法:

  element {
      CSS 样式;
  }
  

.class

• 类选择器允许以一种独立于文档元素的方式来指定样式。

• 语法:

  .class {
      CSS 样式;
  }
  

#id

• id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

• 语法:

  #id {
      CSS 样式;
  }
  

兼容性(以上选择器相同)

• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  1.0	1.0	1.0	5.0

---

复合选择器

交集选择器 --> element.class / element#id

• 交集选择器,匹配指定标签间的共有部分
• p.first --> 匹配class为first的P标签(id类似)

并集选择器 --> element1, element2, element3...

• 并集选择器，匹配所有满足的标签

后代选择器 --> element1 element2

• 后代选择器，匹配element1元素内部的element2元素

子元素选择器 --> element1>element2

• 后代选择器，匹配element1元素中符合直接子元素的element2元素
• 注意: 如果元素不是父元素的直接子元素，则不会被选择

相邻兄弟元素选择器 --> element1 + element2

• 相邻兄弟元素选择器，匹配具有相同父元素且同级的element1相邻的element2元素

通用兄弟元素选择器 --> element1 ~ element2

• 相邻兄弟元素选择器，匹配具有相同父元素且同级的element1之后的element2元素
• 注意: 两种元素必须要具有相同的父元素,但是element2不必紧随element1元素

语法(以上选择器语法相同)

element1 ~ element2
{
    CSS 样式;
}

兼容性(以上选择器兼容性相同)

• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  1.0	1.0	1.0	5.0

---

属性选择器

• 具有特定属性的HTML样式
• IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
• 注意区分属性值为单值和多值的情况

[attribute]

• 用于选取带有指定属性的元素

[attribute=value]

• 用于选取属性值为value的元素
• 注意: 属性值必须唯一,且为value

[attribute*=value]

• 用于选取属性值中能拆分出value的元素
• 包含value
• 例如: title="abbvaluec" --> 成功

[attribute~=value]

• 用于选取属性值中包含独立单词为value,且该单词周围无"-"的元素
• 包含value
• 例如:
  • title="a value b" --> 正确
  • title="a-value value-b" --> 错误

[attribute|=value]

• 用于选取属性值完整且唯一的单词为value,或该单词后跟随以"-"分割的元素
• 注意: value必须唯一且以value开头
• 例如
  • title=" value " / title=" value-b" --> 正确
  • title="a value b" --> 错误

[attribute^=value]

• 用于选取属性值以value开头的元素
• 开头几个字母为value就可以
• 例如: title="valuezzzzz" --> 正确

[attribute$=value]

• 用于选取属性值以value结尾的元素
• 例如: title="zzzzzvalue" --> 正确

语法(以上选择器语法相同)

[attribute=value]
{
    CSS 样式;
}

兼容性(以上选择器兼容性相同)

• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  1.0	1.0	1.0	7.0

伪类选择器(Pseudo-classes)

• CSS伪类是用来向某些选择器添加特殊效果。

• 理解: 是类,作用于标签本身(状态)

• 语法

  selector:pseudo-class {property:value;}
  

• CSS类也可以使用伪类：

  selector.class:pseudo-class {property:value;}
  

:link

• 向未访问过的链接添加样式
• 常用于 <a>标签

:visited

• 向已经访问过的链接添加样式
• 常用于 <a>标签

:hover

• 添加当鼠标悬停在元素上的样式
• a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 常用于 <a>标签

:active

• 添加点击链接时的样式
• a:active 必须被置于 a:hover 之后，才是有效的。
• 常用于 <a>标签

:focus

• 选取具有焦点的元素
• 常用与<input>标签
• :focus 选择器选择器在IE8中必须声明<!DOCTYPE> .
• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  3.1	4.0	2.0	8.0

:first-child

• 匹配父元素的第一个子元素的元素
• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  3.1	4.0	3.0	7.0

• :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>

:last-child

• 匹配父元素的最后一个子元素
• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  3.2	4.0	3.5	9.0

:only-child

• 匹配属于父元素中唯一的子元素的元素
• 例如: p:first-child --> 匹配到的<p>是其父元素的唯一子元素(独生子)
• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  3.2	4.0	3.5	9.0

:nth-child(n)

• 匹配父元素中第n个元素
• n 可以是一个数字, 一个关键字, 或者一个公式
• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  3.2	4.0	3.5	9.0

:nth-last-child

• 匹配其父元素的倒数第n个元素

伪元素选择器

• CSS 伪元素用于将特殊效果添加到某些选择器中
• 理解:首先是元素,且作用于内容本身
• 版本
  • CSS2语法: 一个冒号
  • CSS3语法: 两个冒号

:before

• 向选定的元素前添加内容
• 使用content属性来设置要插入的内容
• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  3.1	4.0	2.0	9.0(部分从8.0)

:after

• 向选定的元素后添加内容
• 使用content属性来设置要插入的内容
• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  3.1	4.0	2.0	9.0(部分从8.0)

:first-letter

• 设置指定元素第一个字母的样式
• 仅适用于块级元素中,常用与<p>标签
• 兼容性
  • IE 5.5-8 和 Opera4-6只支持旧的语法标准,CSS2语法(:first-letter)
  • 新版本支持的语法标准,双引号CSS3语法(::first-letter)

:first-line

• 设置指定元素第一行的样式
• 仅适用于块级元素中,常用与<p>标签
• 各浏览器第一个支持版本

  Safari	Chrome	FireFox	IE
  1.0	1.0	1.0	5.5

::selection

• 匹配元素中被用户选中或处于高亮状态的部分
• 只可以应用少数的CSS属性:
  • color
  • background
  • cursor
  • outline
• IE9, Opera, Chrome, Safari 支持 ::selection选择器
• Firefox 通过其私有属性::moz-selection支持