CSS3常用选择器

css3

浏览数:478

2019-10-9


一、基本选择器

  • 子元素选择器

概念:子元素选择器只能选择某元素的子元素
语法格式:父元素 > 子元素 (Father > Children)
兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • 相邻兄弟元素选择器

概念:相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素
语法格式:元素 + 兄弟相邻元素 (Eelement + Sibling)
兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • 通用兄弟选择器

概念:选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素
语法格式:元素 ~ 后面所有兄弟相邻元素 (Eelement ~ Siblings)
兼容性:IE8+、FireFox、Chrome、Safari、Opera

  • 群组选择器

概念:群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开
语法格式:元素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、动态伪类

  • 锚点伪类

:link, :visited

  • 用户行为伪类

:hover, :active, :focus

  • 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:nth-child(even)

odd和even是可用于匹配下标是奇数或偶数的Element元素的关键词(第一个的下标是 1)

  • 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”

作者:Leophen