前端面试题-CSS选择器
一、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 |
所有伪元素选择器在前端面试题-伪类和伪元素
扩展阅读
前端面试题-CSS选择器的更多相关文章
- 前端面试题-CSS优先级
一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...
- 前端面试题-CSS Hack
一.CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不一 ...
- 前端面试题 ----css篇
转载自https://www.cnblogs.com/zhangshuda/p/8465043.html,感谢原博主 1.css盒模型有哪些及区别content-box border-box padd ...
- 前端面试题CSS一(题目来源网络)
一.什么是html5语义化? 使用合理,正确的html标签格式化文档. 二.CSS样式优先级? 就近原则,行内>内联>外联 三 什么是盒模型? 主要分为两种,w3c标准盒模型,IE标准模型 ...
- 常见前端面试题CSS部分
1.盒模型 IE 盒子模型:IE的width部分包含了 border 和 pading; 标准 W3C 盒子模型: width/height+border+padding+margin; 2.清除浮动 ...
- 2010年腾讯前端面试题学习(jquery,html,css部分)
看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...
- 前端面试题总结(二)CSS篇
前端面试题总结(二)CSS篇 一.link和@import的区别? link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件. link会在页 ...
- 常见前端面试题之HTML/CSS部分
转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...
- web前端面试题HTML/CSS部分
web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...
随机推荐
- [UER #1] DZY Loves Graph
题目描述 开始有 \(n\) 个点,现在对这 \(n\) 个点进行了 \(m\) 次操作,对于第 \(i\) 个操作(从 \(1\) 开始编号)有可能的三种情况: \(Add\) a b: 表示在 \ ...
- 洛谷 P3388 【模板】割点(割顶)(Tarjan)
题目链接 https://www.luogu.org/problemnew/show/P3388 模板题 解题思路 什么是割点? 怎样求割点? dfn :即时间戳,一张图的dfs序(dfs遍历时出现的 ...
- keil格式化项目代码
有时候需要用到一个功能,就先会在网上找到对应的程序,但是百度直接拿来的程序通常不是很规范.想着keil5要是有一个自动格式化代码的功能就好啦,上网一查还真有!需要一些设置如下(keil4与keil5都 ...
- 数据库中的round()
Round函数返回一个数值,该数值是按照指定的小数位数进行四舍五入运算的结果.可是当保留位跟着的即使是5,有可能进位,也有可能舍去,机会各50%.这样就会造成在应用程序中计算有误. 参数规范 语法 r ...
- Picnic Planning POJ - 1639(度限制生成树)
解题报告 题意理解 给定一张N个点,M个边的无向图,求出无向图的一颗最小生成树,但是我们要求一号节点的入度不可以超过给定的整数S 也就是一个最小生成树,要求它的一号节点,最多只能和S个节点相连. ...
- 使用procedump捕获未处理异常的dump
-ma full memory dump, always do this on 2003 as 4gb is not much and it is good to have the heap -mp ...
- luogu P5371 [SNOI2019]纸牌
传送门 打麻将+1(雾 有顺子这种东西...注意到以某个位置为开头的顺子数量最多为2,那么有个想法就是枚举以每个位置为开头的顺子个数,然后每个位置的刻子的取法个数为\(\lceil\frac{\tex ...
- gulp.js实现less批量实时编译
问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...
- 初探CSS -3 语法
CSS 语法 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 2019-11-29-win10-uwp-轻量级-MVVM-框架入门-2.1.5.3199
title author date CreateTime categories win10 uwp 轻量级 MVVM 框架入门 2.1.5.3199 lindexi 2019-11-29 10:16: ...