所有前端体系的集合链接: web 之路
选择器是由 CSS 最先引入的一个机制 (但随着 document.querySelector 等 API 的加入, 选择器已经不仅仅是 CSS 的一部分了)
选择器的基本意义是: 根据一些特征, 选中元素树上的一批元素
分类:
简单选择器: 针对某一特征判断是否选中元素
复合选择器: 连续写在一起的简单选择器, 针对元素自身特征选择单个元素
复杂选择器: 由 空格 > ~ + || 等符号连接的复合选择器, 根据父元素或者前序元素检查单个元素
选择器列表, 由逗号分隔的复杂选择器, 表示 或 的关系
简单选择器
image.PNG
类型选择器和合体选择器
根据一个元素的标签名来选中元素
div { }
我们还必须考虑 html 或者 xml 的命名空间问题
svg 和 HTML 都有 a 标签 我们若要想区分选择 svg 的 a 和 HTML 的 a, 就必须用带命名空间的类型选择器
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- </head>
- <body>
- <svg width="100" height="28" viewBox="0 0 100 28" version="1.1" xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <desc>
- Example link01 - a link on an ellipse
- </desc>
- <a xlink:href="http://www.w3.org">
- <text y="100%">
- name
- </text>
- </a>
- </svg>
- <br/>
- <a href="javascript:void 0;">
- name
- </a>
- </body>
- </HTML>
- @namespace svg url(http://www.w3.org/2000/svg);
- @namespace HTML url(http://www.w3.org/1999/xhtml);
- svg|a {
- stroke:blue;
- stroke-width:1;
- }
- HTML|a {
- font-size:40px
- }
有一个特殊的选择器, 就是 *, 叫做全体选择器, 可以选中任何元素. 用法跟类型选择器完全一致
id 选择器和 class 选择器
- #myid {
- stroke:blue;
- stroke-width:1;
- }
- .mycls {
- font-size:40px
- }
属性选择器出来之后, 其实是可以一定程度上代替它们的, 但是 class 选择器识别的是: 用空格分隔的 class 语法
- <a class="a b c">xxx</a>
- .a {
- color:red;
- }
属性选择器
根据 HTML 元素的属性来选中元素, 一共四种形态
[att]
直接在方括号中放属性名 1, 是检查元素是否具有这个属性, 只要元素有这个属性, 不论属性是什么值, 都可以被选中
[att=val]
精确匹配, 检查一个元素属性值是否是 val
[att~=val]
多种匹配, 检查一个元素的值是否是若干值之一, 这里的 val 不是一个单一的值, 可以使用空格间隔的一个序列
[att|=val]
开头匹配, 检查一个元素的值是否是以 val 开头, 它跟精确匹配的区别是属性只要以 val 开头即可
有些 HTML 属性含有特殊字符, 可以奖 val 用引号括起来, 形成一个 CSS 字符串, 可以使用单引号来规避, 也可以用反斜杠转义
伪类选择器
一系列由 CSS 规定好的选择器, 它们以冒号开头. 分为普通和函数两个类型
树结构关系伪类选择器
:root 伪类 表示树的根元素, 在选择器是针对完整的 HTML 文档时, 我们一般用 HTML 标签即可选中根元素, 但随着 scoped CSS 和 shadow root 等出现, 选择器可以针对某一子树来选择, 这个时候就需要 root 伪类了
:empty 伪类表示没有子节点的元素, 这里有个例外就是子节点为空白文本的情况
:nth-child 和 :nth-last-child ,CSS 的 An+B 语法设计的时比较复杂的
image.PNG
:nth-last-child 的区别仅仅时从后往前数
:first-child :last-child 分别表示第一个和最后一个元素
:only-child 选中唯一一个子元素
of-type 系列, 是一个语法糖, S:nth-of-type(An+B) 是 :nth-child(|An+B| of S) 的另一种写法
所以也有 nth-last-of-type,first-of-type,last-of-type,only-of-type
链接与行为伪类选择器
:any-link 表示任意的链接, 包括 a,area 和 link 标签
:link 表示未访问过的链接
:visited 表示访问过的链接
:hover 表示鼠标悬停在上的元素
:active 表示用户正在激活这个元素
:focus 表示焦点落在这个元素上
:target 用于选中浏览器 URL 的 hash 部分所指示的元素
逻辑伪类元素
介绍一下: not 伪类, 作用是选中内部的简单选择器命中的元素
*|*:not(:hover)
其他伪类选择器
国际化: 处理国际化和多语言问题
dir
lang
音频 / 视频: 用于区分音视频播放状态
play
pause
时序: 用于配合读屏软件等时序性客户端的伪类
- current
- past
- future
表格: 用于处理 table 的列的伪类
- nth-col
- nth-last-col
来源: http://www.jianshu.com/p/6df9da7740ad