一、CSS挑选器作用
CSS 挑选器用于定位我们想要赋予款式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的挑选器也是支撑的,比方 document.document.querySelectorAll。
二、挑选器范例
- 基础挑选器
- 组合挑选器
- 属性挑选器
- 伪类挑选器
- 伪元素挑选器
三、基础挑选器
挑选器 | 寄义 | 作用 | CSS |
---|
.class | 类挑选器 | 婚配 class 包括(不是即是)特定类的元素 | 1 |
#id | id挑选器 | 婚配特定 id 的元素 | 1 |
* | 通用元素挑选器 | 婚配页面任何元素(这也就决议了我们很少运用) | 2 |
element | 元素挑选器 | 挑选HTML元素 | 1 |
四、组合挑选器
挑选器 | 寄义 | 作用 | CSS |
---|
E,F | 多元素挑选器 | 同时婚配元素E或元素F | 1 |
E F | 子女挑选器 | 婚配E元素一切的子女(不只是子元素、子元素向下递归)元素F | 1 |
E>F | 子元素挑选器 | 婚配E元素的一切直接子元素 | 2 |
E+F | 直接相邻挑选器 | 婚配E元素以后的相邻的同级元素F | 2 |
E~F | 一般相邻挑选器(弟弟挑选器) | 婚配E元素以后的同级元素F(不管直接相邻与否) | 3 |
五、属性挑选器
挑选器 | 示例 | 示例申明 | CSS |
---|
[attribute] | [target] | 挑选一切带有target属性元素 | 2 |
[attribute=value] | [target=-blank] | 挑选一切运用target=”-blank”的元素 | 2 |
[attribute~=value] | [title~=flower] | 挑选题目属性包括单词”flower”的一切元素 | 2 |
[attribute ^= language] | [lang ^= en] | 挑选一个lang属性的起始值=”EN”的一切元素 | 2 |
[attribute $= language] | [lang $= en] | 挑选一个lang属性的末端值=”EN”的一切元素 | 2 |
[attribute *= language] | [lang *= en] | 挑选一个lang属性的包括“EN”的一切元素 | 2 |
六、伪类挑选器
挑选器 | 示例 | 示例申明 | CSS |
---|
:link | a:link | 挑选一切未接见链接 | 1 |
:visited | a:visited | 挑选一切接见过的链接 | 1 |
:hover | a:hover | 把鼠标放在链接上的状况 | 1 |
:active | a:active | 挑选正在运动链接 | 1 |
:focus | input:focus | 挑选元素输入后具有核心 | 2 |
一切伪类挑选器在前端面试题-伪类和伪元素
七、伪元素挑选器
挑选器 | 作用 | 申明 | CSS |
---|
::before/:before | 在被选元素前插进去内容。 | 须要运用 content 属性来指定要插进去的内容。被插进去的内容实际上不在文档树中。 | 2 |
::after/:after | 在选被元素后插进去内容 | 其用法和特征与:before类似。 | 2 |
::first-letter/:first-letter | 婚配元素中文本的首字母。 | 被润饰的首字母不在文档树中。 | 1 |
::first-line/:first-line | 婚配元素中第一行的文本。 | 这个伪元素只能用在块元素中,不能用在内联元素中。 | 1 |
一切伪元素挑选器在前端面试题-伪类和伪元素
扩大浏览
- 前端面试题-clearfix(消灭浮动)
- 前端面试题-BFC(块格式化上下文)