一、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(块格式化上下文)

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

  1. 前端面试题-CSS优先级

    一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...

  2. 前端面试题-CSS Hack

    一.CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不一 ...

  3. 前端面试题 ----css篇

    转载自https://www.cnblogs.com/zhangshuda/p/8465043.html,感谢原博主 1.css盒模型有哪些及区别content-box border-box padd ...

  4. 前端面试题CSS一(题目来源网络)

    一.什么是html5语义化? 使用合理,正确的html标签格式化文档. 二.CSS样式优先级? 就近原则,行内>内联>外联 三 什么是盒模型? 主要分为两种,w3c标准盒模型,IE标准模型 ...

  5. 常见前端面试题CSS部分

    1.盒模型 IE 盒子模型:IE的width部分包含了 border 和 pading; 标准 W3C 盒子模型: width/height+border+padding+margin; 2.清除浮动 ...

  6. 2010年腾讯前端面试题学习(jquery,html,css部分)

    看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...

  7. 前端面试题总结(二)CSS篇

    前端面试题总结(二)CSS篇 一.link和@import的区别? link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件. link会在页 ...

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

    转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...

  9. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

随机推荐

  1. [BZOJ2964]Boss单挑战

    题目描述 某\(RPG\)游戏中,最后一战是主角单挑\(Boss\),将其简化后如下: 主角的气血值上限为\(HP\),魔法值上限为\(MP\),愤怒值上限为\(SP\):\(Boss\)仅有气血值, ...

  2. 简单而粗暴的方法画任意阶数Bezier曲线

    简单而粗暴的方法画任意阶数Bezier曲线 虽然说是任意阶数,但是嘞,算法原理是可以到任意阶数,计算机大概到100多阶就会溢出了 Bezier曲线介绍] [本文代码] 背景 在windows的Open ...

  3. Kali安装在U盘+使用aircrack-ng套件

    因为: Kali Linux 自带aircrack-ng 虚拟机VMware不能用笔记本内置网卡,需要另外买一个无线网卡,然而并不想买 不想给笔记本重装Kali Linux系统 有闲置的32GU盘 所 ...

  4. laravel框架之即點即改

    //控制器層 public function ajaxsex(request $request) { $id = $request->get('id'); $fd = $request-> ...

  5. 【优质blog、网址】置顶

    一.大公司等技术blog:   blog1: http://blog.csdn.net/mfcing/article/details/51577173 blog2: http://blog.csdn. ...

  6. RabbitMQ入门教程(三):Hello World

    原文:RabbitMQ入门教程(三):Hello World 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...

  7. npm学习(六)之如何创建 Node.js 模块

    如何创建 Node.js 模块 Node.js 模块是一种可以发布到 npm 的包.当你创建一个新模块时,创建 package.json 文件是第一步. 你可以使用 npm init 命令创建 pac ...

  8. MySQL数据库主从同步实战过程

       Linux系统MySQL数据库主从同步实战过程 安装环境说明 系统环境: [root@~]# cat /etc/redhat-release CentOS release 6.5 (Final) ...

  9. Delphi 源代码生成器

  10. linux c 链接详解3-静态库

    3静态库 摘自:Linux C编程一站式学习 透过本节可以学会编译静态链接库的shell脚本! 有时候需要把一组代码编译成一个库,这个库在很多项目中都要用到,例如libc就是这样一个库,我们在不同的程 ...