一、相关选择器
- *{margin:0; padding:0};
- 标签选择器 a{text-decoration:none};
- id选择器 #box{color:red};
- class选择器 .main{color:blue};
- 群组选择器 em,: {font-style:normal};
二、 层次选择器 (关系选择器)
- 后代选择器
语法： E F匹配E元素下所有子元素F
- 子选择器
语法： E>F 匹配E元素下第一级F eg： ul>hi>a
- 相邻兄弟选择器
语法： E+F匹配E元素后面紧邻的F元素(有且仅有一个)
- 通用兄弟选择器
语法： E~F 匹配E元素后面所有的F元素(有可能匹配到多个)
三、伪类选择器
1. 动态伪类选择器
- E:link 链接没有被访问时的状态；
- E：visited 链接访问后的状态；
- E：hover 鼠标滑过时状态；
- E：active 鼠标按下时的状态；
- E：focus 获取到焦点时触发的状态；
eg:
input:focus {border:2px solod red}
2.结构伪类选择器
- :first-child 匹配父元素下第一个子元素；
注： :first-child <=> :nth-child(1)
都是匹配父元素下第一个子元素；
- :last-child 匹配父元素下最后一个子元素
注: :last-child <=> :nth-last-child(1)
都是匹配父元素下最后一个子元素；
-
：nth-child(n) 匹配父元素下n个子元素
-
：nth-last-child(n) 匹配父元素下倒数第n个子元素
-
：nth-child(2n) <=>:nth-child(even)匹配父元素下第偶数个子元素；
-
：nth-child(2n+1) <=>:nth-child(odd)匹配父元素第奇数个子元素；
-
：first-of-type 匹配父元素下指定类型的子元素中第一个；
-
：last-of-type 匹配父元素下指定类型的子元素中最后一个；
-
:nth-of-type(n)匹配父元素下指定类型的子元素中的第n个；
-
：nth-last-of-type(n) 匹配父元素下指定类型的 子元素中的倒数第n个；
-
：only-child 匹配父元素下唯一一个子元素；
-
：only-of-type 匹配父元素下指定类型的子元素中唯一一个；
-
：empt 匹配内容为空的元素(空格，换行他不能有)；
-
： root 匹配根元素html；
3.VI状态伪类选择器(主要针对表单元素操作)
- E: checked 匹配选中状态的单选或者复选按钮； eg: input:checked+label+label{color:red};
匹配选中状态的单选或者复选按钮后面紧邻的label元素；
- E：enabled 匹配启用状态的表单元素;
- E: disabled 匹配禁用状态的表单元素；
4.目标伪类选择器
语法： E：target 匹配锚点链接连接到的那个E元素；
eg： p{display:none} p:target{display:block}
注： 默认p元素隐藏不显示，当锚点链接连接到对应的p元素时显示；
5. 语言伪类选择器
语法： E:lang(val) 匹配含有lang属性，并且值为val的E元素；
eg: html ：lang(eg){color:red}
6.否定伪类选择器
语法： E:not(val) 匹配下满足条件val的E元素
eg：li:not([class ="lis"]){color:red}
注： 匹配class名下不是lis的元素；
7.属性选择器
- a[title]{color:red} 匹配含有title属性的a元素
- a[title="活动"]{color:red}匹配含有title属性，并且值为"活动"的a元素；
- a[href^="https"]{color:red}匹配含有href属性，属性值以"https"开头的a元素
- a[href$="com"]{color:red}匹配含有href属性，属性值以"com"结束的a元素；
- a[class="menu"]{color:red}匹配含有class属性，并且属性值以menu开头或值就为menu的a元素；
- a[title*="活动"]{color:red}匹配含有title属性，并且属性值中含有活动二字的a元素；
- a[tilte~="活动"]{color:red}匹配含有title属性，并且属性含有活动这个词的a元素；
渐进增强和优雅降级
-
渐进增强
刚开始针对低版本浏览器构建网页的基本功能，然后针对高版本浏览器进行交互效果的添加，达到更好的用户体验；
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s 过度
- 优雅降级 刚开始就构建网站的完整功能，然后针对不同浏览器调试和修复；
-webkit-transition:all 1s; -moz-transition:all 1s; -o-transition:all 1s; -ms-transition:all 1s;
注： -webkit- 针对webkit内核 -moz- 针对火狐内核 -o- 针对欧朋内核 -ms- 针对IE内核
接下来进入css3弹性布局=>
