Skip to main content

CSS3 选择器大合唱

一、基本选择器​

1、子元素选择器​

概念：子元素选择器只能选择某元素的子元素

语法格式：父元素 > 子元素 （Father > Children）

兼容性：IE8+、FireFox、Chrome、Safari、Opera

2、相邻兄弟元素选择器​

概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素

语法格式：元素 + 兄弟相邻元素 （Eelement + Sibling）

兼容性：IE8+、FireFox、Chrome、Safari、Opera

3、通用兄弟选择器​

概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素

语法格式：元素 ~ 后面所有兄弟相邻元素 （Eelement ~ Siblings）

兼容性：IE8+、FireFox、Chrome、Safari、Opera

4、群组选择器​

概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号 , 隔开

语法格式：元素1, 元素2, …, 元素n （Eelement1, Element2, …, Elementn）

兼容性：IE6+、FireFox、Chrome、Safari、Opera

二、属性选择器​

  • Element[attribute]

概念：选择所有带有 attribute 属性元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera


  • Element[attribute=“value”]

概念：选择所有使用 attribute = "value" 的元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera


  • Element[attribute~=“value”]

概念：选择 attribute 属性包含单词 "value" 的元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera


  • Element[attribute*=“value”]

概念：选择 attribute 属性值包含 "value" 的所有元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera


  • Element[attribute^=“value”]

概念：选择 attribute 属性值以 "value" 开头的所有元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera


  • Element[attribute$=“value”]

概念：选择 attribute 属性值以 "value" 结尾的所有元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera


  • Element[attribute|=“value”]

概念：选择 attribute 属性值为 "value” 或以 "value-" 开头的元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera

三、伪类选择器​

1、动态伪类​

1-1、锚点伪类​

  • :link
  • :visited

1-2、用户行为伪类​

  • :hover
  • :active
  • :focus

1-3、UI元素状态伪类​

  • :enabled 选择器匹配每个已启用的元素（大多用在表单元素上）
  • :disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）
  • :checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

兼容性：IE9+、FireFox、Chrome、Safari、Opera

2、CSS3结构类​

  • Element:first-child

概念：选择属于其父元素的首个子元素的每个 Element 元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera


  • Element:last-child

概念：指定属于其父元素的最后一个子元素的 Element 元素

兼容性：IE8+、FireFox、Chrome、Safari、Opera


  • Element:nth-child(N)

概念：匹配属于其父元素的第 N 个子元素，不论子元素是哪个都算入，匹配不到Element则无效

兼容性：IE9+、FireFox4+、Chrome、Safari、Opera


  • Element:nth-child(n)

n 是一个简单表达式，取值从 0 开始计算。这里只能是 n，不能用其他字母代替。


  • Element:nth-child(odd)

用于匹配下标是奇数的 Element 元素的关键词（第一个的下标是 1）


  • Element:nth-child(even)

用于匹配下标是偶数的 Element 元素的关键词


  • Element:nth-last-child(N)

概念：匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

兼容性：IE9+、FireFox4+、Chrome、Safari、Opera


  • Element:nth-of-type(N)

概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素

兼容性：IE9+、FireFox4+、Chrome、Safari、Opera


  • Element:nth-last-of-type(N)

概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数

兼容性：IE9+、FireFox4+、Chrome、Safari、Opera


  • Element:first-of-type

概念：匹配属于其父元素的特定类型的首个子元素的每个元素

兼容性：IE9+、FireFox、Chrome、Safari、Opera


  • Element:last-of-type

概念：匹配属于其父元素的特定类型的最后一个子元素的每个元素

兼容性：IE9+、FireFox、Chrome、Safari、Opera


  • Element:only-child

概念：匹配属于其父元素的唯一子元素的每个元素

兼容性：IE9+、FireFox、Chrome、Safari、Opera


  • Element:only-of-type

概念：匹配属于其父元素的特定类型的唯一子元素的每个元素

兼容性：IE9+、FireFox4+、Chrome、Safari、Opera


  • Element:empty

概念：匹配没有子元素（包括文本节点）的每个元素

兼容性：IE9+、FireFox、Chrome、Safari、Opera


  • 否定选择器（:not）

概念：匹配非指定元素/选择器的每个元素

语法格式：父元素:not(子元素/子选择器) （Father:not(Children/selector)）

兼容性：IE9+、FireFox、Chrome、Safari、Opera

3、伪元素​

  • Element::first-line

概念：根据 "first-line" 伪元素中的样式对 Element 元素的第一行文本进行格式化

说明："first-line" 伪元素只能用于块级元素


  • Element::first-letter

概念：用于向文本的首字母设置特殊样式

说明："first-letter" 伪元素只能用于块级元素


  • Element::before

概念：在元素的内容前面插入新内容

说明：常用 content 配合使用


  • Element::after

概念：在元素的内容后面插入新内容

说明：常用 content 配合使用，多用于清除浮动

清除浮动例子：

.header::after{
  display: block;
  content: "";
  clear: both;
}

  • Element::selection

概念：用于设置在浏览器中选中文本后的背景色与前景色

兼容性：::selection 在 IE 家族中，只有 IE9+ 版本支持，在 Firefox 中需要加上其前缀 -moz