前端面试题-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(块格式化上下文)

原文地址：https://www.cnblogs.com/homehtml/p/11968344.html

时间： 2024-11-01 14:18:02

前端面试题-CSS选择器的相关文章

前端面试题CSS

文章目录 万能居中 BFC优化 盒模型哪两种模式?什么区别?如何设置 常用清除浮动的方法,如不清除浮动会怎样? 删格化的原理 纯css实现三角形 高度不定,宽100%,内一p高不确定,如何实现垂直居中? 至少两种方式实现自适应搜索 设置一段文字的大小为6px css菊花图 关于em 关于vh, vw Flex布局 overflow原理 实现自适应的正方形: 标准模式和怪异模式 CSS3实现环形进度条 css优先级 万能居中1.margin: 0 auto;水平2.text-align: cent

常见前端面试题之HTML/CSS部分

转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? Doctype是document type(文档类型)的简写,是用来说明所用的XHTML或HTML是什么版本的.XHTML1.0 提供了三种DTD声明可供选择,分别是: 1.过渡的(Transitional,也叫混杂模式):要求比较宽松,允许继续使用HTML4.01的标识,完整声明为 <!DOCT

Web前端面试题集锦

Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScript: 数据类型.面向对象.继承.闭包.插件.作用域.跨域.原型链.模块化.自定义事件.内存泄漏.事件机制.异步装载回调.模板

web前端面试题系列：（一）

1.作用域问题 var a = 6; setTimeout(function () { alert(a); a = 666; }, 1000); a = 66; 结果:66 2.语义化标签 1)tite与h1的区别 2)b与strong的区别 3)i与em的区别 PS:不要小看这些题,80%人答不上来 3.事件绑定 addEventListener,第三个参数是用来表示事件是以事件冒泡还是事件捕获这个各位都知道!但是他问的问题是: 我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你

前端面试题2016--HTML

本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可能的! 前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增.正如赫门在2015深JS大会上的<前端服务化之路>主题演讲中说的一句话:“每18至24个月,前端都会难一倍”,这些变化使前端的能力更加丰富.创造的应用也会更加完美.所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前

各大互联网公司前端面试题（js）

对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Function) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方

前端面试题（JS篇）

原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题,这套还不错,留下~~ 1.JS相关问题: 解释下事件代理(基础题) 解释下 JavaScript 中 this 是如何工作的(始终指向调用当前函数的对象) 解释下原型继承的原理. AMD vs. CommonJS? 什么是哈希表? 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):f

2017年-Web前端面试题(HTML至Nodejs)

[原]2017年-Web前端面试题(HTML → Nodejs)   出自作者小矮人Web前端,博文地址:http://www.cnblogs.com/itlkNote/  文中有少许重复问题! 第一阶段 HTML.CSS.HTML5.CSS3 1.XHTML与HTML的有何异同? 2.介绍一下CSS的盒子模型?弹性盒子模型是什么? 3.Doctype的作用?标准模式与兼容模式各有什么区别? 4.HTML5 为什么只需要写 <!DOCTYPE HTML>? 5.行内元素有哪些?块级元素有哪些?

Web前端面试题-1

Web前端面试题 Web前端面试题 1 HTML/CSS部分 4 1.什么是盒子模型?有几种? 4 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 4 3.CSS实现垂直水平居中 4 4.简述一下src与href的区别 5 5.什么是CSS Hack? 5 6.简述同步和异步的区别 6 7.px和em的区别 6 8. 什么叫优雅降级和渐进增强? 6 9.浏览器的内核分别是什么? 7 10.XHTML和HTML有什么区别 7 12.前端页面有哪三层构成,分别是什么?作用是什么?