《CSS选择器世界》读书笔记一
1、CSS选择器由4类元素组成：
（1）选择器：标签(p\body)、类名(.class)、属性([attr])等
（2）选择符：后代关系( )、父子关系(>)、相邻兄弟关系（+)、随后兄弟关系（~）、列关系（||）
（3）伪类：前面一个冒号，比如:hover，通常与浏览器行为和用户行为相关联
（4）伪元素：前面两个冒号，比如：::before ::after ::first-letter ::first-line等
2、CSS选择器作用域
（1） 以前有原生支持过<style scoped></style>，后面被浏览器舍弃。目前less\sass中实现scoped，是通过在dom中添加唯一标识属性来实现，vue中是data-v-XXXX属性 。
（2）shadow dom中的样式只会作用与shadow dom中。
3、css选择器命名空间(namespace)
比如<svg xmls="http://www.w3.org/2000/svg"></svg>，这里的xmls指向一个命令空间，后面的地址不指向线上地址，浏览器也不会使用或者处理这个地址。
命名空间是用来区分来自多个xml词汇表的元素的属性和样式彼此之间没有冲突，比如区分 html中的a元素和svg中的a元素。
在css中声明命名空间如下：
@namespace url(http://w3.org/1999/xhtml)
@namespace svg url(http://www.w3.org/2000/svg) // 这里的svg相当于是一个css变量名
a {} // 第一个命名空间的a元素
svg|a // svg命名空间中的a元素
*|a // 两个命名空间的a元素
实际开发中，用不了命名空间，比如svg a就能选择 svg中的元素
4、无效选择器的应用
一些选择器并不兼容所有浏览器，或者不兼容浏览器所有的版本，这个时候可以用无效选择器来区分浏览器，对不同的浏览器/浏览器版本写不同的代码兼容布局。
几个选择器一个，一个选择器无法识别，会导致整个语句无效。
IE浏览器不支持识别 -webkit-私有前缀开头的伪元素，其他浏览器支持。
.example {}// IE浏览器 .example,::-webkit-whatever {} // 其他浏览器
5、选择器优先级
css选择器优先级可分为6个等级
（1）0级：*、选择符(空格、+、~、>、||)、逻辑组合伪类:not()、:is()、:where()，逻辑组合伪类决定其优先级的是括号里面的选择符。（+0）
（2）1级：标签选择器（+1）
（3）2级：类选择器、属性选择器、伪类（+10）
（4）3级：ID选择器（+100）
（5）4级：style内联属性
（6）5级：!important顶级优先级，
（7）优先级一样时，看出现的先后顺序
css优先级和dom元素的层级没有关系。
css增加优先级技巧：
（1）重复自身 比如 .foo.foo 或者 a a
（2）用必然会出现的属性选择器 比如 .foo[class]
6、css选择器的命名
（1）css选择器是否区分大小写：属性和标签不区分，属性值(类名、id等)区分。
（2）尽量使用能看懂意思的短命名；业务组件里面尽量使用组合命名而不是和单命名；面向css属性的命名可以用单命名。
（3）尽量不要嵌套选择器：因为易导致渲染性能差、优先级混乱、样式布局脆弱？
（4）css选择器性能排序如下：css选择器是从右往左进行匹配渲染
id选择器>类选择器>标签选择器>通配符选择器>属性选择器>部分伪类
（5）在写css代码时，尽可能保持较低的优先级，尽可能的使用无嵌套的纯类名选择器
（6）在js中加的类名(比如.active)最好不要直接写样式，可以通过类名去标识状态，css通过.active与其他类名组合来控制，这样可以实现js与css的分离。
7、css选择符
（1）css选择器权重相等时，color由dom最深的赋色决定，因为color有继承特性，有继承特性的还有font、文本系列属性(text-indent\line-height\text-aligin等)、visibility、表格布局属性（border-spacing、border-collapse等）、cursor、opacity等，其中内联元素和块级元素可以继承的属性不同。(针对单一选择器时，继承性有效)
（2）当包含后代选择符时，整个选择器的优先级与祖先元素dom层级没有任何关系。
（3）querySelectotAll是全局选择器，会包含符合条件的第一层级,如果是局限于第一层级下面 ，可以在使用:scope来限制，比如querySelectorAll(":scope div div")
（4）子选择符只会匹配第一代子元素，后代选择符(空格)会选择所有满足条件的后代
（5）相邻兄弟选择符、随后兄弟选择符会忽略文本节点、注释节点
（6）实现:first-child, a、.li:not(:first-child) { margin-top:20px} 除了第一个.li 其他的都有top 20， b、.li + ,li {}
8、元素选择器和属性选择器
（1）元素选择器不能重复自身 比如div*div无效，其他的类选择器、id选择器、属性值匹配选择器可以重复自身，比如#foo#foo,.foo.foo
（2）标签选择器与其他选择器连用时，必须写在前面才合法，比如[type="text"]input是不合法的。（通配选择器也符合这一条）
（3）类选择器和属性选择器、伪类连用时，推荐把类选择器放在属性选择器后，比如[type="text"].input 这样性能更好
（4）标签选择器与属性选择器连用时，可以看看能不能去掉标签选择器，降低选择器优先级
（5）属性选择器:
a. [attr] 包含指定attr属性，自定义属性也支持
b.[attr="val"]属性值完全相等 单引号、双引号、不写引号都行，属性中有空格 ，则必须用引号
c.[attr~="val"] 属性值中包含了多个关键词，其中某一个关键词匹配val
d.[attr|="val"]匹配属性以val和val-开头的元素
e.[attr^="val"] 属性值开头时val，实际开发中可以用来判断a元素的链接地址类型，比如[href^="http"]、[href^="#"]
f.[attr$="val"]属性值以val结尾，实际开发中可以用来判断a元素链接的文件类型，显示对应的小图标，比如[href$=".pdf"]、[href$=".png"]
g.[attr*="val"]属性值包含val，实际应用：链接元素是否为外网地址、通过添加自定义属性 + js设置style样式来实现过滤
h.[attr~="val" i] i匹配符可以忽略大小写来匹配，在移动端可以使用
文章中出现的兼容性等零散性知识
:first-child IE8+
:not() IE9+
calc IE9+
direction:'ltr' ''ltr' 兼容好 改变内联元素文档流方向
控制table中整列样式： colgroup和col元素实现 双管道符( || ) 也可以实现
自定义元素标签选择器 IE9+
属性选择器 IE8+
属性正则匹配选择器 IE7+
图片类型：png\gif\jpg\webp\jpeg
