作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。
给链接定义样式：
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。
其他：
否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法： :not(选择器){}
比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。
属性选择器可以挑选带有特殊属性的标签。
语法：
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]
作用：选中指定父元素的指定子元素
语法：父元素 >子元素
比如body >h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器
其他子元素选择器
除了根据祖先父子关系，还可以根据兄弟关系查找元素。
语法：
兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。
不同的选择器有不同的权重值：
【这是我的学习笔记，你也可以拿去用】
1 元素选择器：比如p{xxxx}，选择文档中所有的p元素；
2 类选择器：比如.center_bar{xxxx}，选择文档中使用了类center_bar的元素；
3 id选择器：比如.button1{xxxx}，选择文档中使用了button1的元素；
4 或选择器：用逗号连接多个选择器；
5 与选择器：多个选择器紧挨在一起；
6 后代选择器：用空格连接多个选择器；
7 子代选择器：用大于号连接多个选择器，它其实是后代选择器的特殊情况；
8 属性选择器：
(1) 比如p[id]，选择标签上有属性“id”的p元素；
(2) 比如p[id="button1"]，选择标签上有属性“id”并且id的值为“button1”的p元素；
(3) 比如p[id^=”b”]，选择标签上有属性“id”并且id的值以“b”开头的p元素；
(4) 比如p[id$=”b”]，选择标签上有属性“id”并且id的值以“b”结尾的p元素；
(5) 比如p[id*=”b”]，选择标签上有属性“id”并且id的值包含“b”的p元素；
9 p:first-child：既是p元素，也是某元素的第一个孩子；
10 p:last-child：既是p元素，也是某元素的最后一个孩子；
11 p:nth-child(3)：既是p元素，也是某元素的第三个孩子；
12 p:nth-child(odd)：既是p元素，也是某元素的第奇数个孩子；
13 伪类选择器都是某种状态，比如active、link、hover，使用“:”；
14 伪元素选择器，确实有某些实体的东西，比如第一行文字、第一个文字、被选中的文字，使用“::”
15 只有多个选择器选中了同一个元素的同一个属性，才会出现优先级的问题；
16 如果两个选择器优先级相同，那么写在后面的选择器生效；
17 选择器优先级的排列：
(1) !important
(2) 内联样式
(3) id选择器
(4) 类和伪类选择器
(5) 元素和伪元素选择器
(6) *选择器
(7) 继承样式
id：指定标签的唯一标识，定位到页面上唯一的元素。使用场景： 使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上。
class ：类选择器，指定标签的类名，定位到页面上某一类的元素 。
使用场景：使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。
* {} /* a=0 b=0 c=0 d=1 ->0,0,0,0 */
p {} /* a=0 b=0 c=0 d=1 ->0,0,0,1 */
a:hover {} /* a=0 b=0 c=1 d=1 ->0,0,1,1 */
ul li {} /* a=0 b=0 c=0 d=2 ->0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 ->0,0,0,3 */
h1+input[type=hidden]{} /* a=0 b=0 c=1 d=2 ->0,0,1,1 */
ul ol li.active {} /* a=0 b=0 c=1 d=3 ->0,0,1,3 */
#ct .box p {} /* a=0 b=1 c=1 d=1 ->0,1,1,1 */
div#header:after {} /* a=0 b=1 c=0 d=2 ->0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 ->1,0,0,0 */
先比较a，a大的权重最大，再依次比较b，c，d
#header{ }
id选择器，匹配特定id为header的元素
.header{ }
类选择器，匹配class包含header的元素
.header .logo{ }
后代选择器，匹配class为header元素所有的后代（不只是子元素、子元素向下递归）
calss为logo的元素
.header.mobile{ }
匹配class既有header又有logo的元素
.header p, .header h3{ }
同时匹配class为header所有后代元素p和class为header所有后代元素h3
#header .nav>li{ }
匹配id为header元素所有后代中calss为nav的所有直接子元素li
#header a:hover{ }
匹配id为header所有后代中鼠标悬停其上的a元素
#header .logo~p{ }
匹配id为header所有后代中class为logo之后的同级元素p（无论直接相邻与否）
#header input[type="text"]{ }
匹配id为header所有后代中属性type值为text的元素
n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even
<style>.item1:first-child{ color: red} .item1:first-of-type{ background: blue} </style><div class="ct"><p class="item1">aa</p><h3 class="item1">bb</h3><h3 class="item1">ccc</h3></div>
