CSS选择器

标签选择器（掌握）

1. 标签选择器选中的事当前页面中所有此类标签，不是单独某一个。
2. 只要是HTML中的标签就可以作为标签选择器。如：a,h,img,ul,ol,dl,li,input,button等。

---

ID选择器（掌握）

1. 每个HTML标签都有一个属性叫id，故每个标签都可以设置id。
2. 在同一个界面中的id名称不可以重复。
3. 在编写id选择器时，一定要在id名称前面加上#！
4. id的名称只能由字母、数字、下划线组成，且不能以数字开头；id的名称不能是HTML标签的名称。
5. 一般不会仅仅为了给设置样式而设置id属性，因为id属性是留给js使用的。
6. 格式：

#outer{
    color:red;
}

---

类选择器（掌握）

1. 每个HTML标签都有一个属性class。
2. 同一个界面中的class名称可以重复。
3. 在编写class选择器时一定要在类名前面加点号.。
4. 类名的命名规范同id。
5. 类名就是专门用来给某个特定的标签设置样式的。
6. 在HTML中一个标签可以同时绑定多个类名！格式：<标签名称 class="类名1 类名2 类名3 ···">，只有这一种写法，分开写是错误的，类名之间用空格隔开。
7. 格式：

.outer{
    color:red;
}

---

后代选择器（掌握）

1. 作用：找到指定标签的所有后代标签（儿子），设置属性。
2. 注意：后代选择器必须用空格隔开。
3. 注意：后代不仅仅是儿子，也包括孙子、重孙子等，只要最终时放在指定标签中的都是后代。
4. 祖先可以是：标签名称或类名或id名， 后代可以是：标签名称或类名或id名。并且后代选择器之后可以无限深入，如div p i img {color:red;}。
5. 格式：

祖先标签名称或类名或id名 后代标签名称或类名或id名{
    属性:值;
}

---

子元素选择器（掌握）

1. 作用：找到指定标签中所有特定的直接子元素，然后设置其属性。
2. 子元素选择器只会查找儿子，不会查找其他被嵌套的标签如孙子重孙子等；
3. 子元素选择器之间需要用>符号连接，并且不能有空格！
4. 子元素选择器中，父亲可以是：标签名称或类名或id名， 儿子可以是：标签名称或类名或id名。
5. 子元素选择器可以通过>一直找下去。
6. 格式：

标签名称1>标签名称2{
    属性:值;
}

先找到名称为“标签名称1”的标签，然后在这个标签中查找有直接子元素名称叫“标签名称2”的元素，然后设置其属性。

---

交集选择器（了解）

1. 作用：给所选选择器交集那部分标签设置属性。
2. 注意：选择器和选择器之间没有任何的链接符号！
3. 选择器可以是：标签选择器、类选择器、id选择器。如：p.par#price
4. 格式：

选择器a选择器b{
    属性:值;
}

---

并集选择器（掌握）

1. 作用：给所有选择器选中的标签设置属性。
2. 并集选择器必须使用,连接。
3. 并集各个选择器可以是：标签选择器、类选择器、id选择器。
4. 格式：

选择器a，选择器b{
    属性:值;
}

---

兄弟选择器（掌握）

1. 相邻兄弟选择器：作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性。
2. 相邻兄弟选择器只能选中紧跟其后的哪个标签，不能选中被隔开的标签。
3. 通用兄弟选择器：作用：给指定选择器后面的所有选择器选中的所有标签设置属性。
4. 通用兄弟选择器必须用~隔开。
5. 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，不管有没有被其他标签隔开。
6. 相邻兄弟选择器格式：

选择器a+选择器b{
    属性:值;
}

通用兄弟选择器格式：

选择器a~选择器b{
    属性:值;
}

---

序选择器（非常重要！掌握）

1. 定义：同级别的第几个，同类型的第几个。
2. 同级别的第几个:first-child、last-child、nth-child(n)、nth-last-child(n)选中同级别中的第一个／最后一个标签／第几个／倒数第几个。:only-child选中父元素中唯一的元素。注意点：不区分类型。
3. 同类型的第几个：:first-of-type、:last-of-type、:nth-of-type(n)、:nth-last-of-child(n)选中同级别中同类型的第一个／最后一个／第几个／倒数第几个。:only-of-child选中父元素中唯一类型的标签。注意点：区分类型。
4. :nth-child(odd) 、:nth-child(even)：选择同级别的奇数／偶数。
5. :nth-of-type(odd)、:nth-of-type(even)：选择同级别同类型的奇数／偶数。
6. :nth-child(xn+y)：x和y是用户定义的，n是一个计数器，从0开始递增。
7. 序选择器的应用：日历表中特殊的日子的样式。

---

属性选择器（了解）

1. 作用：根据指定的属性名称找到对应的标签，设置其属性。
2. 属性的取值是以什么开头的：attribute|=value（css2）、attribute^=value（css3）。
3. 属性的取值是以什么结尾的：attribute$=value（css3）。
4. 属性的取值是包含某个特定的取值的：attribute~=value（css2）、attribute*=value（css3）。
5. a
6. a
7. a
8. 格式：
   第一种：

[attribute]

第二种：

[attribute=value]

---

通配符选择器

1. 作用：给当前页面上所有的标签设置属性。
2. 格式：*{color:red;}

---