前端面试题-CSS选择器

一、CSS选择器作用

CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document.querySelectorAll。

二、选择器类型

  1. 基本选择器
  2. 组合选择器
  3. 属性选择器
  4. 伪类选择器
  5. 伪元素选择器

三、基本选择器

选择器

含义

作用

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

所有伪元素选择器在前端面试题-伪类和伪元素

扩展阅读

  1. 前端面试题-clearfix(清除浮动)
  2. 前端面试题-BFC(块格式化上下文)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券