CSS之选择器

CSS1选择器

• .class

选择 class="info" 的所有元素
.info{background:red;}

• #id

选择 id="nav" 的所有元素

#nav {background:red;}

• element

选择所有的element(a、p...)元素

• element,element

选择多个所有element(a、p...)元素

• :link

选择所有未被访问的链接

• :visited

选择所有已被访问的链接

• :active

选择活动链接

• :hover

选择鼠标指针位于其上的链接

• :first-letter

选择每个element元素的首字母

• :first-line

选择每个element元素的首行

CSS2选择器

• *

*选择所有元素 ps: *{}

• element > element2

选择父元素为 元素的所有 元素。

• element+element2

选择element元素后面所有的element2元素

• :focus

选择获得焦点的 input 元素

• :first-child

选择属于父元素的第一个子元素的每个

元素

• element:before

在每个element元素的内容之前插入内容

• element:after

在每个element元素的内容之后插入内容

• element:lang[it]

选择带有以 "it" 开头的 lang 属性值的每个element元素

属性选择器

属性选择器	描述
E[att]	选择匹配元素E,并且元素定义了att即可 (CSS2)
E[att = "val"]	选择匹配元素E,并且元素定义了att，其属性值等于val (CSS2)
E[att~ = "val"]	选择匹配元素E,并且元素定义了att，其属性包含val这个词汇 (CSS2)
E[att| = "val"]	选择匹配元素E,并且元素定义了att， 其属性以val开头的（该值必须是整个单词）(CSS2)
E[att^ = "val"]	选择匹配元素E,并且元素定义了属性att,其属性值以val 开头的任何字符串 (CSS3)
E[att$ = "val"]	选择匹配元素E,并且元素定义了属性att,其属性值以val 结尾的任何字符串 (CSS3)
E[att* = "val"]	选择匹配元素E,并且E元素定义了属性att,其属性值任意位置包含了val。 （字符串与属性值中的任意位置相匹配）(CSS3)

CSS3选择器

• element ~element2

选择前面有element元素的每个element2元素

• :root

:root 选择器匹配文档根元素。

在 HTML 中，根元素始终是 html 元素。

:root{background:#000;}
等价于
html{background:#000;}

• not

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

:not(p){background:#000};// 非p元素的设置

input:not([type="submit"]){background:#000;}// input并且type不等于submit的元素

• empty

选择器匹配没有子元素（包括文本节点）的每个元素

• target

选择当前活动的 # 元素,用来匹配文档(页面)的url的某个标志符的目标元素

测试

#brank:target{
  background: #000;
}

• :enabled

选择每个启用的元素（有些元素是可以使用此属性:ps: input）

• :disabled

选择每个禁用的元素（有些元素是可以使用此属性ps:input）

• :checked

选择每个被选中的元素(input)

• :selection

选择被用户选取的元素部分,用来匹配突出显示的文本(用鼠标选择文本时的文本)

注意：

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
2、Firefox 支持替代的 ::-moz-selection。

---

• :read-only

选择器用来指定处于只读状态元素的样式

• :read-write

选择器对元素处于非只读状态时的样式

• :last-child

选择属于其父元素最后一个子元素

• :nth-child(n)

选择器用来定位某个父元素的一个或多个特定的子元素

:nth-child(n)选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素

image.png

• :nth-last-child(n)

从某父元素的最后一个子元素开始计算，来选择特定的元素

• :first-of-type

用来定位一个父元素下的某个类型的第一个子元素

• ele:nth-of-type(n)

选择属于其父元素第n个ele元素的每个ele元素

• :last-of-type

父元素下的某个类型的最后一个子元素

• :nth-last-of-type(n)

选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始

• :only-child

匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

• :only-of-type

选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素

更多详细w3school

原文链接