css选择器家族是css家族的一个分支，它的使命是精确捕捉到上头要的特定html元素，协助css家族其他样式族人为其设置样式，从而实现css家族的伟大复兴。
css选择器家族内部有不同功派分支，它们各个身怀绝技。
元素选择器分支最基础，它们根据html预定义标签进行捕获；
派生选择器分支对元素之间的关系了如指掌，它们根据html元素位置定位选择；
属性选择器分支和属性家族合作定位选择，天网恢恢，其中属性选择器门派又中独立出两大分支：类选择器和id选择器，分别根据类名和id名定位选择；
伪类选择器分支个性鲜明，它们另辟蹊径，可以根据元素的不同状态进行选择。
我是瞎扯和正文的分割线。
元素选择器|类型选择器-html元素本身定位
派生选择器(contextual selectors)-根据上下文关系定位
1.后代选择器|包含选择器（descendant selector）-嵌套关系，一层或多层
article p {} //选中article标签内部嵌套的所有p
2.子选择器（Child selectors）-嵌套关系，一层
article > p{} //选中article标签内部嵌套的第一层p
3.相邻兄弟选择器（Adjacent sibling selector）-平级关系，紧接在一元素后面的元素
article + p {} //选中紧邻在article标签下面的p,如果article后面紧邻的不是p，失效。
后代选择器的影响一统江湖，千秋万代；子选择器只认亲儿子；相邻兄弟选择器只认跟在自己屁股后边儿的兄弟。
例子1 table.company td > p
td元素所有子元素，其中td元素包含于类名为company的table
例子2 html > body table + ul
紧跟在table后边出现的ul，其中table包含于body，而body是html的子元素
属性选择器-和各种属性合作定位，定位符‘[]’
以title属性为例
[title] 选中带有title属性的元素
[title][href] a选中既有title又有href的a元素
[title="tt"] 选中有title属性，并且title属性值为“tt”的元素，必须完全匹配
[title~="tt"] 属性名以空格分隔 && 属性名包含"tt"的元素,比如属性为“tt t1”的元素
多类选择器只能用于class，~=可以用于所有属性的多选择
p[class~='class1'] 可以匹配到p.class1.class2
[title|="tt"] 属性名以连字符分隔 && 属性名包含"tt"的元素,比如属性为"tt-t1"的元素7
匹配语言en，en-us，en-au
[title^="tt"] 属性名以“tt”开头的元素，无论空格、分隔符还是其他
[title$="tt"] 属性名以“tt”结尾的属性，无论连字符是空格、分隔符还是其他
[title*="tt"] 属性名包含“tt”的元素，无论连字符是空格、分隔符还是其他
匹配网址，a[href*="w3school.com.cn"]可以匹配到http://w3school.com.cn/html;https://w3school.com.cn/css/;
id选择器-和id属性合作定位，定位符‘#’
#myIDVSdiv#myID选中id为‘myID’的元素 VS 选中id为‘myID’的div元素
老版本的 Windows/IE 浏览器可能会忽略‘#myID’只认识后面('div#myID')
ID 属性不允许有以空格分隔的词列表
类选择器-和class属性合作定位，定位符‘.’
.fancy tdVStd.fancy选中包含于类名为fancy的元素的所有td VS 类名为fancy的td元素
class属性允许有以空格分隔的词列表,多类选择器.fancy.fancy1
伪类选择器(Pseudo-classes)
selector : pseudo-class|pseudo-element {property: value}
1. 锚伪类，a
a:link 未被访问的链接
a:visited 已被访问的链接
a:hover 鼠标移动到链接
a:active 链接被点击的时刻
2. :first-child伪类
p:first-child 选中作为某元素第一个子元素的所有 p 元素
3. :focus伪类
input:focus{ background-color: yellow;}
4. :lang伪类
q:lang(no){ quotes: "~" "~"} <q lang="no">引用</q>的表现由 "引用" => ~引用~
5. :first-letter | :first-line
p:first-letter | p:first-line 向段落首字母或首行添加样式
6. :before | :after
在元素之前|之后插入一个元素
h1:before{ content: url("/img/a.jpg");}
在h1前面插入一个图片，也可以插入一段音频等
