CSS选择器

• 元素选择符：通常是HTML元素.一般就是其中的DOM树中的元素。
• {color： red orange yellow green blue;}多个属性的取值的时候，同时传入多个取值的时候其中的值是可以按照不同的分隔符号来进行区分的。
• 群组选择符：不同的选择器之间使用逗号分隔！h2,p{color:yellow}其中的逗号是必须要有的，否则对应的是不同的结果。
• 通用选择符：*{}其会匹配到全部的元素，群组声明就是将其中的多个属性的值写在同一个括号内。
• 类选择符：可以特定的一个选择，.{},使用的实例如：p.waring{font-size:10px;}也就是匹配其中class属性的值包含waring的p元素，其它的任何元素不论是否包含类warning的都是不会匹配的，也就是使用了p来代替了*的。类选择器可以是多个类，对应的每一类之间使用空格来分开，类中的顺序对于结果没有影响，只有其中是否出现有影响，只有出现与否有影响的，几个选择符没有空格的出现就是代表其对应的同时出现的各种选择符的同时匹配的结果要求！

<p class="warning urgent"> </p>

• ID选择符：唯一性，也是特定选择,#{}，一页面中只能有一个，浏览器是不一定会总是检查ID是不是唯一的，也就是说一个文档中也许可以出现相同的ID属性，但是文档中出现多个ID选择器是不利于一些脚本语言的实现的，例如JS中的getElementById()的函数预期是只能得到一个指定值的元素。而且ID选择符不可以串在一起使用的，也就是说ID选择符是不可以以空格的方式分割开的。
• 属性选择器P77：属性，任何在HTML中的属性都是可以作为被选择的对象的 ，也就是说在HTML中任何一个标签中定义的一些属性都是可以作为选择　的对象的*[title]、img[alt]、
  
• 使用ID选择器、类选择器、属性选择器、伪类选择符或者是伪元素选择符时，如果没有依附元素选择符的时候，隐士的蕴含通用选择符（使用*符号表示的）.

根据结构来进行选择

• 后代选择符:h1 em {color : red;}也可以是非常具体的后代选择符,其对应的是会具体到某一个最后的一个后代的ul ol ul em{color: red;}, 后低选择器不知道迭代的深度有多少,其会一直向内部去查找.
• 选择子元素: >: h1 > strong{color:red;}这个只能选择直接的子元素的,不可以选择后代的元素.
• 选择相邻的同胞元素:+ h1 + p {color: red;}两者必须是同一个父元素之下的,而且必须是当前的相邻的后者元素.
• 选择后续同胞:~:属于同一个父元素下的,相邻的后续的全部的子元素:h2 ~ ol {color: red}

伪类选择符:

• 拼接伪类:a:link:hover{} a:visited:hover{}
• 选择 根元素::root{} 选择空元素::empty{}可以理解为唯一一个匹配的时候考虑文本节点的CSS选择符.
• 选择唯一的子代:img:only-child{}这个方式必须保证选择的元素中只有一个后代元素存在的,不能有多个出现否则匹配不成功.但是可以使用img:only-of-type{}的方式完成选择其中只有一个对应的类型的.
• 选择第一个元素和最后一个元素:p:first-child{} \ p:last-child{}
• 选择第一个或者最后一个某种元素:p:first-of-type{} \ p:lat-of-type{} \ p:only-of-type{},
• 选择第n个子元素:p:nth-child(n){} 和 p:nth-last-child{} 多个伪类是可以联合起来使用的:p:nth-child(1):nth-last-child(1){}其中的n的值可以传递一个具体的阿拉伯数字,也可以传递一个具体的多项式的表达式.也可以是传递的为even 和 odd双数和奇数的.后者是从反方向上来进行处理的.
  -选择每第n个某种元素:p:nth-of-type{}也就是将其中的child 的 关键字修改为: of-type{}的值,对应的便可以实现对应的功能的!
• 超链接伪类::link :visited
• 用户操作伪类::focus :hover :active ,
  
• UI 状态伪类:P110
• 范围伪类:有两个:in-range 和 out-of-range
• 还有很多使用比较少的伪类,使用的时候在继续查找即可!

伪元素选择符: 伪类使用的为一个冒号,伪元素使用的为一个冒号的.只能用来装饰对应的块级元素的.

• 装饰首字母:p::first-letter{} 只可以用于块级元素上.
• 装饰首行:p::first-line{},也只是可以用于块级元素上.
• 装饰或者创建前置和后置内容元素:::before{} 和 ::after{}也是只可以装饰在对应的块级元素上的.