首页 > 代码库 > 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 选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。