所有前端体系的集合链接：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
网友评论