- 浏览器的内核
常用四个前缀:
前缀 浏览器
-webkit chrome 、 safari
-moz firefox
-ms IE
-o opera
兼容性:
那么为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的编写格式:
1、Mozilla(Firefox等浏览器)
-moz-border-radius: //简写
2、WebKit ( Chrome等浏览器)
-webkit-border-radius: //简写
3、Opera浏览器:
border-radius: //简写
4、Trident (IE)
IE<9不支持border-radius;IE9下没有私有格式,都是用border-radius,其写法和Opera是一样的。
-
css3 在css2的基本进行增补与修订
2.1 选择器CSS3字符串匹配属性选择器:
元素名[属性=“值”] , 全匹配 ^
元素名[属性^=“值”], 表示以“值”开头的元素
元素名[属性$=“值”], 表示以“值”结尾的元素
元素名[属性*=“值”], 表示匹配包含“值”的元素
元素名[属性~=“值”], 匹配用空格分隔后,有等于值的元素目标伪类选择器:
选择器[type=“chekcbox”]:checked{ } //选中状态下的样式设置
选择器[type=“text”]:disabled{ } //禁用状态下的样式设置
选择器[type=“text”]:read-only{ } //只读状态下的样式设置
not伪选择器: #div:not(){ } //只要不是(可以跟任何条件)都会被选中结构性伪类选择器: 原理: 必须以父类为选择基准,并且符合以下两个要求: 1. 必须是指定元素 2. 必须是该父元素下所指定的位置(会考虑Body内所有的元素) 父选择器 p :nth-child(2) /* 第二个子元素 且元素为P */ 父选择器 p: first-child{ } /* 第一个子元素 且元素 为p */ 父选择器 p: last-child{ } /* 最一个子元素 且 元素为p */ 父选择器 p: only-child{ } 父选择器 p:nth-of-type(2) /* 第二个标签为P 的子元素 */ 父选择器 p:nth-last-of-type(2) /* 倒数第二标签为P 的子元素 */ 父选择器 i: only-child{ } /* 当父元素内,有且仅有唯一的指定元素的时候才有用 */
兄弟素选择器
#p3~span{ } /指定元素之后的所有相同标签的弟弟元素被选中/
#p3+span {} /指定元素的相邻弟弟元素,且为span/伪类与伪元素
:hover
link visited hover active::after 与 ::before
相当于在元素内容的前面,和后面添加一个spanafter 清除浮动的影响
e.g:nav:after{ content: ""; clear:both; display: block; }