前端面试题-CSS选择器

一、CSS选择器作用

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

二、选择器类型

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

三、基本选择器

选择器含义作用CSS
.class类选择器匹配 class 包含(不是等于)特定类的元素1
#idid选择器匹配特定 id 的元素1
*通用元素选择器匹配页面任何元素(这也就决定了我们很少使用)2
element元素选择器选择HTML元素1

四、组合选择器

选择器含义作用CSS
E,F多元素选择器同时匹配元素E或元素F1
E F后代选择器匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F1
E>F子元素选择器匹配E元素的所有直接子元素2
E+F直接相邻选择器匹配E元素之后的相邻的同级元素F2
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
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:hovera:hover把鼠标放在链接上的状态1
:activea:active选择正在活动链接1
:focusinput: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(块格式化上下文)
    原文作者:WEBING
    原文地址: https://segmentfault.com/a/1190000013745407
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞