学前端的第六天（CSS Day04）

1. 浏览器的内核
   常用四个前缀：

前缀 浏览器
-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是一样的。

2. 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
   相当于在元素内容的前面，和后面添加一个span

   after 清除浮动的影响
   e.g:

   nav:after{
        content: "";
        clear:both;
        display: block;
    }