css3选择器

一、基本选择器

1. 通配符(通用选择器) 匹配所有html元素

*{margin:0; padding:0;}

2. 标签选择器

a{text-decoration:none;}

3. id选择器

#box{color:red;}

4. class选择器

.section{float:left;}

5.群组选择器

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

二、层次选择器

1. E F 后代选择器

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

2. E>F 子选择器

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

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

匹配E元素后紧邻的那个F元素，有且仅有一个

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

匹配E元素后所有F元素，有可能匹配到多个

◆ 伪类选择器

三、动态伪类选择器

1. E:link 超链接的初始状态

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

3. E:hover 鼠标悬停在E元素时的状态

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

5. E:focus 获取到焦点时的状态

四、结构性伪类选择器

1. :first-child

匹配父元素下第一个子元素

注：:first-child 等同于 :nth-child(1)

都是匹配父元素下第一个子元素

2. :last-child

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

注： :last-child 等同于 :nth-last-child(1)

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

3. :nth-child(n)

匹配父元素下第n个子元素

4. :nth-child(2n) 等价于 :nth-child(even)

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

5. :nth-child(2n+1) 等价于 :nth-child(odd)

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

6. :nth-last-child(n)

匹配父元素下倒着数的第n个子元素

---

7. :first-of-type

匹配父元素下指定类型的第一个子元素

8. :last-of-type

匹配父元素下指定类型的最后一个子元素

9. :nth-of-type(n)

匹配父元素下指定类型的第n个子元素

10. :nth-last-of-type(n)

匹配父元素下指定类型的倒数第n个子元素

---

11. :only-child

匹配父元素下唯一一个子元素

12. :only-of-type

匹配父元素下指定类型的唯一一个子元素

13. :empty

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

14. :root

匹配根元素html

五、UI状态伪类选择器

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

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

匹配选中状态的单选或复选按钮后面紧邻的那个label元素

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

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

六、目标伪类选择器

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

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”]){color:red;} 匹配class名不是lis的li元素

八、属性选择器

1. E[attr]

匹配含有attr属性的E元素

2. E[attr=val]

匹配含有attr属性，并且值为val的E元素

3. E[attr^=val]

匹配含有attr属性，并且值以val开头的E元素

4. E[attr$=val]

匹配含有attr属性，并且值以val结尾的E元素

5. E[attr|=val]

匹配含有attr属性，并且值为val或以val-开头的E元素

6. E[attr~=val]

匹配含有attr属性，并且在属性值列表中含有val这个词的E元素

7. E[attr*=val]

匹配含有attr属性，并且在属性值列表中含有val这些字的E元素

十、渐进增强和优雅降级

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

开始就针对低版本浏览器构建网站的基本功能，然后针对高版本浏览器进行交互效果的添加，达到更好的用户体验。

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

刚开始就针对高版本浏览器构建网站的完整功能，然后再针对各浏览器调试和修复。

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

-webkit- 针对webkit内核

-moz- 针对火狐内核

-o- 针对opera内核

-ms- 针对IE内核

十二、使用border属性实现三角效果

语法：元素{
width:0;
height:0;
border:3px solid transparent;
border-top-color:red;
}