首页 > 代码库 > CSS 选择器

CSS 选择器

最基本的三种选择器

标签选择器(tag selector)

类选择器(Class selectors)

通过设置元素的 class 属性,可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

在写样式表时,类选择器是以英文句号(.)开头的。

ID选择器(ID selectors)

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

在写样式表时,ID选择器是以#开头的。

如果多于一个规则指定了相同的属性值都应用到一个元素上,CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器(tag selector)更具确定度。

 

更多细节

你也可以将多个选择器组合起来构成更确定的选择器。

比如,选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的<p> 元素。

除了class 和 id,你还可以用方括号的形式指定其他属性。比如,选择器 [type=‘button‘] 选中所有 type 属性为 button 的元素。

 

 

伪类选择器(Pseudo-classes selectors)

CSS伪类(pseudo-class)是加在选择器后面的用来指定元素状态的关键字。比如,:hover 会在鼠标悬停在选中元素上时应用相应的样式。

伪类和伪元素(pseudo-elements)不仅可以让你为符合某种文档树结构的元素指定样式,还可以为符合某些外部条件的元素指定样式:浏览历史(比如是否访问过 (:visited), 内容状态(如 :checked ), 鼠标位置 (如:hover).

 

资料: 基于关系的选择器Edit

CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。

常见的基于关系的选择器
选择器 选择的元素
A E 元素A的任一后代元素E (后代节点指A的子节点,子节点的子节点,以此类推)
A > E 元素A的任一子元素E(也就是直系后代)
E:first-child 任一是其父母结点的第一个子节点的元素E
B + E 元素B的任一下一个兄弟元素E
B ~ E B元素后面的拥有共同父元素的兄弟元素E

你可以任意组合以表达更复杂的关系。

你还可以使用星号(*)来表示”任意元素“。

 

 

 

 

CSS 选择器