复杂选择器 内容生成 多列 CSSHack(浏览器兼容)

1、兄弟选择器
   匹配指定元素的相邻兄弟元素
   1、相邻兄弟选择器
      匹配相邻的元素
      匹配当前元素【后面】的【一个】元素，前提两者必须拥有相同父元素
      语法：
           selctor1+selector2
           通过 + 作为结合符
  eg:
     div+p{}
      注意：只找与当前元素相关的后面一个紧挨着他的兄弟元素，如果符合则匹配，不符合也不会向下查找。
   2、通用兄弟选择器
      匹配当前元素【后面】的【所有】【兄弟】元素
      语法:
           selector1~selector2
  div.first span~b.bold_700{

  }
           使用 ~ 作为结合符  div ~ p
  注意：第二个元素不必紧紧跟随第一个元素的后面
   练习1：
       1、通过指定元素 修改其相邻兄弟为红色字体
          div.s1+p{
   color:red;
 }
       2、通过指定元素 修改其通用兄弟为#ccc背景
          div.s1~p{
background:#ccc;
 }
       <p>
       <div>指定元素
       <p>
       <p>
2、属性选择器
   能够将元素附带的属性用于选择器中，对带有指定属性的元素设置样式
   语法：
        1、[属性名]
  选择 带有 指定属性 的元素
  [title] : 匹配包含title属性的所有元素
2、元素[属性名]
  p[id] : 匹配所有包含id属性的p元素
  div[title] : 匹配所有包含title属性的div元素
3、元素[属性1][属性2]....
  匹配即具备属性1又具备属性2的元素
  div[id][class]
4、元素[属性=值]
  input[type=text]:匹配所有type属性值为text的input元素
  input[type="text"]
  input[type='text']


  input[class=border]
  input[id="txtName"]
5、元素[属性~=值] 
  <div class="content"></div>
  <div class="content important"></div>
  div[class~=important]
  指定属性中，包含【独立】【值】单词的元素
6、元素[属性^=值]
  属性值以【值】开始的元素
  div[class^=c] : class属性以c开头的div元素
  div[class^=my]: class属性以my开头的div元素
7、元素[属性*=值]:
  属性值中包含【值】的元素
8、元素[属性$=值]:
  属性值以【值】结尾的元素
3、伪类选择器
   1、目标(target)伪类
      用于匹配 当前活动的 锚点元素
      语法：:target
   2、元素状态伪类
      场合：表单元素居多
      :enabled  匹配每个已启用的元素
      :disabled 匹配每个被禁用的元素
      :checked 匹配每个已被选中的input元素(单选按钮、复选框)
   3、结构伪类
      1、:first-child ,匹配属于其父元素中的首个子元素(子元素:first-child)
      2、:last-child , 匹配属于其父元素中的最后一个子元素
          table tr:first-child{}
 table tr:last-child{}
      3、:empty , 匹配没有子元素(包含文本)的元素
          
          <p></p>：可以匹配出来


          以下两种情况匹配不出来:
 <p>
   <a>百度</a>
 </p>
 <p>百度</p>
      4、:only-child ,匹配是其父元素中的唯一子元素
          
 <p>
   <a>百度</a>
 </p>
 a:only-child{}可以匹配




 <p>
   <a>百度</a>
   <a>谷歌</a>
 </p>
 a:only-child{}无法匹配
    4、否定伪类
       匹配非指定选择器的每个元素(即不是指定选择器的其他元素)
       语法:   :not(selector)
       input:not([type=text])
       tr:not(:first-child):not(:last-child)
4、伪元素选择器
   特点:获取指定元素中某一部分文本而用的。
   1、:first-letter
       用于选取指定选择器（元素）的首字母
   2、:first-line
       用于选取指定选择器（元素）的首行文本
   3、::selection
       匹配被用户选取的部分
5、内容生成
   通过 css  向已有的元素上增加新的文本（图片）内容
   选择器：
      1、:before
         向匹配元素之前增加生成的内容
定位到匹配元素开始的位置
      2、:after
         向匹配元素之后增加生成的内容


eg:
   div:before{}
   p:after{}
   属性：
      1、content
         作用：配合 :before , :after伪元素插入生成的内容div:before{
content:"生成的内容:";
}
常用取值:
  字符串：普通文本
  url:图像
  计数器:
6、计数器
   通过css 定义一个计数器，在其他元素中可以使用该计数器生成的数字。
   属性：
      1、counter-reset
         作用：用于定义计数器并设置初始值
      如果不设置初始值，那么默认为0，如果设置的话可以为正、负、0
选择器{
counter-reset:counter1 10;
}
选择器{
counter-reset:counter1 10 counter2 20;
}
注意：如果整个页面的任何一个元素都想使用到计数器的话，最好将其定义在body中。切记将计数器定义在某个元素中(除body外),如果这样定义，再使用时永远都是初始值。
body{
counter-reset:c1 10 c2 20;
}
      2、counter-increment
         作用:设置每次使用计数器时的增量，默认值为1
属性值：可以为正(递增)，也可以为负(递减)
注意：哪个标签用，在那个标签中声明 counter-increment属性
语法：
  counter-increment:计数器名称 增量值;
  div{
counter-increment:c1 10;
  }
   函数：
        counter(counterName) 函数
作用：使用计数器创建出来的数字文本。
counterName：计数器名称
7、多列
   属性：
     1、column-count
        元素被分隔的列数  3
     2、column-gap
        列与列之间的间隔  px
     3、column-rule
        列规则，列间隔符的宽度、样式、颜色
column-rule:1px solid red;
   浏览器兼容问题：
   Internet 10 和 Opera 支持多列
   Firefox : -moz-
   Chrome 和 Safari : -webkit-
   div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;


-o-column-count:3;/*Opera*/
-o-column-gap:50px;
-o-column-rule:2px solid red;


-moz-column-count:3; /*火狐中的多列设置*/
-moz-column-gap:50px;
-moz-column-rule:2px solid green;


-webkit-column-count:3;/*Chrome 与 Safari*/
-webkit-column-gap:50px;
-webkit-column-rule:2px solid red;
   }
   常用火狐写法
        -moz-column-count:3;
   -moz-column-gap:50px;
   分开写
        -moz-column-rule-style:dashed/dotted(点状)/double(双线)/solid(实线);
  -moz-column-rule-width:thin/medium/thick/length;
  -moz-column-rule-color:orange;
  整体
   -moz-column-rule:2px dashed red;


8、CSS Hack
1.什么是css Hack?
  由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏
览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们
把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS hack的原理


2.css hack 的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景
来应用不同的CSS。


3.CSS hack分类


CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针
对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但
firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对
IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。
 3、HTML头部引用Hack
      通过 IE 的条件注释 来完成的
      条件注释：
        与html注释相似<!-- -->
if条件判断是否能够解析注释里的内容


gt : 选择条件版本以上的版本(不包含条件版本)
    gt ie 7
lt : 选择条件版本以下的版本(不包含条件版本)
    lt ie 8
gte :选择条件版本以及以上版本
    gte ie 7
lte :
! :选择条件版本意外的所有版本
   ! ie6
    
        <!--[if 条件]>
 满足条件要做的事情
<![endif]-->
      1、通过条件注释声明，只在IE下生效
        <!--[if ie]>
 这段文本只在ie中显示
<![endif]-->
      2、只在ie6以上的浏览器生效
        <!--[if gt IE 6]>
  
<![endif]-->
      3、在IE8上不生效
        <!--[if ! IE 8]>
 
<![endif]-->
IE所有的css hack
由于所有的IE浏览器都能够识别特定的css属性值后缀\9，因此我们可以给css的属性值添加\9后缀(在结尾的分号之前)，从而做到只有IE浏览器能够识别
该属性，其他浏览器无法识别从而将其忽略掉。
比如：.css-hack {
    color: red\9; /* 所有浏览器上显示为红色 */
    
}






IE6：


_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一选择符中的 !important */
IE7：


+selector{property:value;}
IE8：


selector{property:value\0;}
IE6 & IE7：


*selector{property:value;}
IE6 & IE7 & IE8：


测试：
background-color:red; /* All browsers */  
    background-color:blue !important;
    *background-color:black;   
    +background-color:yellow;
    background-color:gray\9; 
    background-color:purple\0; 
    background-color:orange\9\0; 
    _background-color:green; 
  


总结：* 或 # ，IE7、IE11 支持。
     \9 ，IE8、IE9、IE11 支持。
     \0 ，IE8、IE9 支持。
      *、#、\9、\0 这几个写法除了IE外其他浏览器均不支持。