C3选择器

一、基本选择器

1.通用选择器(通配符)

*{margin:0; padding:0;}

2.标签选择器(元素选择符)

a{text-decoration:none;}

3.id选择器

#box{color:red;}

4.class选择器

.footer{color:blue;}

5.群组选择器

h1,h2,h3,h4,h5,h6{font-weight:100;}

二、层次选择器(关系选择器)

1.E F 后代选择器

匹配E元素下所有的子元素F

eg: .box a{color:red;}

匹配.box下所有子元素a

2.E>F 子选择器

匹配E元素下第一级子元素F

eg: .box>a{color:red;}

匹配.box下第一级子元素a

3.E+F 相邻兄弟选择器

匹配E元素后紧邻的F元素(有且仅有一个)

eg: .box+h1{color:blue;}

匹配.box后紧邻的h1元素

4.E~F 通用兄弟选择器

匹配E元素后所有的F元素(有可能匹配到多个)

eg: .box~h1{color:blue;}

匹配.box后所有的h1元素

◆ 伪类选择器

三、动态伪类选择器

1. E:link 超链接没有被访问过时的状态

2. E:visited 超链接访问过后的状态

3. E:hover 鼠标滑过(鼠标悬停在E上)时的状态

4. E:active 鼠标按下(E元素被激活)时的状态

5. E:focus 光标聚焦时触发的状态

eg: input:focus{border:2px solid red;}

四、结构性伪类选择器

1. :first-child 匹配某个父元素下第一个子元素

eg: ul li:first-child{color:red;}

匹配ul下第一个子元素li

2. :last-child 匹配某个父元素下最后一个子元素

eg: ul li:last-child{color:blue;}

匹配ul下最后一个子元素li

注：a) :first-child <=> :nth-child(1) 都是匹配父元素下第一个子元素

b) :last-child <=> :nth-last-child(1)

都是匹配父元素下最后一个子元素

3. :nth-child(n) 匹配父元素下第n个子元素

eg: ul li:nth-child(4){color:pink;}

匹配ul下第4个子元素li

4. :nth-child(2n) <=> :nth-child(even)

匹配父元素下第偶数个子元素

5. :nth-child(2n+1) <=> :nth-child(odd)

匹配父元素下第奇数个子元素

6. :nth-last-child(n) 匹配父元素下从后往前找的第n个子元素

eg: ul li:nth-last-child(2){color:blue;}

匹配ul下倒数第2个li

---

7. :first-of-type 匹配某个父元素下指定类型的第一个子元素

eg: ul li:first-of-type{color:red;}

匹配ul下li这种类型的子元素中的第一个

8. :last-of-type 匹配某个父元素下指定类型的最后一个子元素

eg: ul li:last-of-type{color:blue;}

匹配ul下li这种类型的子元素中的最后一个

9. :nth-of-type(n) 匹配父元素下指定类型的第n个子元素

eg: ul li:nth-of-type(3){color:pink;}

匹配ul下li这种类型的子元素中的第3个

10. :nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素

eg: ul li:nth-last-of-type(3){color:purple;}

匹配ul下li这种类型的子元素中的倒数第三个

---

11. :only-child 匹配父元素下唯一一个子元素

12. :only-of-type 匹配父元素下指定类型的唯一一个子元素

13. :empty 匹配内容为空的元素(空格，回车换行符都不能有)

14. :root 匹配根元素html

五、UI状态伪类选择器

1. E:checked 匹配选中状态的单选或复选按钮

eg: input:checked+label{color:red;}

匹配选中状态的input元素后面紧邻的label元素

2. E:disabled 匹配禁用状态的表单元素

eg: input:disabled{background:red;}

3. E:enabled 匹配启用状态的表单元素

eg: input:enabled{border:2px solid green;}

六、目标伪类选择器

语法： E:target 匹配锚点链接连接到的那个元素

eg: p:target{display:block;}

当锚点链接连接到p元素时显示

七、语言伪类选择器

语法： E:lang(val) 匹配含有lang属性，并且值为val的E元素

eg: html:lang(en){font-family:“楷体”;}

八、否定伪类选择器

语法：E:not(F) 匹配不满足条件F的E元素

eg: li:not([class=“lis”]){background:pink;}

匹配不满足条件class名为lis的li元素

九、属性选择器

1. E[attr] 匹配含有attr属性的E元素

eg: a[title]{text-decoration:none;}

匹配含有title属性的a元素

2. E[attr=val] 匹配含有attr属性并且值为val的E元素

eg: a[title=“教育”]{color:red;}

匹配含有title属性并且值为千锋教育的a元素

3. E[attr^=val] 匹配含有attr属性并且值以val开头的E元素

eg: a[href^=“http”]{color:gray;}

匹配含有href属性，并且值以http开头的a元素

4. E[attr$=val] 匹配含有attr属性并且值以val结尾的E元素

eg: a[href$=“com”]{background:orange;}

匹配含有href属性，并且值以com结尾的a元素

5. E[attr|=val] 匹配含有attr属性并且值以val-开头或值为val的E元素

eg: a[class|=“link”]{color:blue;}

匹配含有class属性，并且值以link-开头，或值为link的a元素

6. E[attr*=val] 匹配含有attr属性，并且属性值中含有val的E元素

eg: a[title*=“教育”]{color:red;}

匹配含有title属性，并且属性值中含有教育两个字的a元素

7. E[attr~=val] 匹配含有attr属性，并且属性值中含有val这个词的E元素

eg: a[title~=“教育”]{color:green;}

匹配含有title属性，并且属性值中含有教育这个词的a元素

十、渐进增强和优雅降级

1.渐进增强(由低到高)

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

2.优雅降级(由高到低)

一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

十一、css3属性针对不同浏览器内核兼容写法

-webkit- 针对webkit内核

-moz- 针对火狐内核

-ms- 针对IE内核

-o- 针对opera内核