css3笔记

1、选择器
   帮助我们定位网页上的元素，并且施加样式
   常用选择器
   id选择器
   类选择器
   标签/标记选择器
   伪类选择器
   ....


   1、兄弟选择器
      兄弟：具备相同父元素的元素，就是[兄弟]元素
            <div>
      <p></p>
      <span></span>
   </div>
      1、相邻兄弟选择器
            <div>
      <p></p>
      <span></span>
      <div></div>
      <h1></h1>
   </div>
 相邻兄弟：紧紧挨着当前元素的 元素 
 语法：+ 作为结合符
       selctor1+selector2
div+span : 匹配所有紧挨着div后面的span元素
#d1+.important : 匹配 紧挨着 id为di的元素 后面的 class为important元素
      2、通用兄弟选择器
         通用：后面所有
匹配某元素后面的所有兄弟元素(没有位置关系的限制)
语法：~ 作为结合符
      selector1~selector2
      div~p : 匹配 div 后面所有的 p元素
   2、属性选择器
      将元素所附带的属性用于选择器中，帮助我们匹配指定的元素
      语法:[]
      attr:attribute , 属性，可以表示标签中任何一个属性
      2.1 [attr] : 
         [title] : 匹配具备title属性的元素
div[class] : 匹配 具备class属性的 div元素 
div[id][class] ： 匹配 既有 id 属性 又有class属性的div元素
      2.2 [attr=value]
           [type=button] : 匹配 type 属性值为 button 的元素
  input[type=button] : 匹配 type 属性值为 button的input元素
  div[class="lf"] :
      2.3 [attr ~= value]


          [class ~= important]
 class属性值，是一个用 空格 隔开的值列表，important是当前列表中的一个单词
 <div class="important lf danger weight"></div>
      2.4 [attr ^= value]
          ^ : 表示 以 ... 开始
 [class ^= test] : 匹配 class 属性值 以 test作为开始的元素
    <div class="test_danger"></div> 能匹配
    <p class="test123"></p> 能匹配
    <div class="mytest"></div> 不能匹配
      2.5 [attr $= value]
          $ : 以 ... 结束
      2.6 [attr *= value]
          * : 包含
   3、伪类选择器
      作用：匹配元素的不同的状态 
      1、链接伪类
         :link
:visited
      2、动态伪类
         :hover
:active
:focus
      3、目标伪类
         :target
作用：突出显示 活动的 html 锚元素
      4、元素状态伪类
         作用：匹配元素 启用 禁用 被选中的状态的。
      input 具备禁用启用
      input : radio , checkbox 具备被选中状态


  :enabled : 匹配每个已启用的元素
  :disabled : 匹配每个已禁用的元素
  :checked : 匹配每个已被选中的input元素(只用于 checkbox 和 radio)


注意：元素状态伪类，只有在表单元素中
      5、结构伪类
         :first-child  :  匹配属于其父元素中的首个子元素
            table td:first-child
:last-child : 匹配属于其父元素中的最后一个子元素


:nth-child(number) : 匹配是其父元素中的第 number 个子元素




:empty : 匹配没有子元素(包含文本)的元素
    <div>  有子元素
<p></p>  
    </div>


    <div> 有子元素
我是子元素吗？
    </div>


    <div> 有子元素

    </div>


    <div></div> 没有子元素
:only-child : 匹配是其父元素中的唯一子元素

      6、否定伪类
         :not(selector)
匹配非指定元素/选择器的每个元素
或
将 selector 匹配的元素 排除在外
table td:not(:first-child){} : 匹配table中，每行里面除第一列以外的其他列
   4、伪元素选择器
      匹配 元素中 内容 的某一部分
      1、:first-letter 或 ::first-letter
         选取指定元素的首字符
      2、:first-line 或 ::first-line
         选取指定元素的首行
      3、::selection
          匹配被用户选取的部分



      : 与 ::的区别
      1、: 全部都是伪类选择器
        :: 全部都是伪元素选择器
      2、在CSS2规范中，伪元素 和 伪类 全部都通过 : 显示
      3、在CSS3规范中，要求 伪元素 必须用 :: ，伪类，只能用 :
      4、但是，网页为了向前兼容 CSS2 ，所以，有的时候，可以使用 : 来表示 伪元素


*****************************************************
1、内容生成
   通过CSS的方式，在指定的元素[前面] 或者 [后面] 增加一部分内容


   伪元素选择器：
   :before  : 能够匹配到某个元素的内容区域之前
     <div> [:before] This is a div</div>
   :after  : 能够匹配到某个元素的内容区域之后
     <div>This is a div [:after]  </div>


   属性：
        content 属性 一般会配合着 :before 以及 :after,来插入生成的内容
常用取值：
 1、字符串，普通的文本
 2、url() : 图片
 3、计数器
   通过内容生成解决的问题：
   1、父子元素中，设置子元素的上外边距时的问题
      解决方案：
        1、加边框，不合适
2、父元素中增加上内边距 ， 不合适
3、内容生成
   2、浮动 引发父元素高度的问题
      解决方案:
        1、overflow:hidden
  不合适
2、显示设置 父元素高度
  不适合做高度自适应的元素
3、父元素末端追加 空 div 并且 clear:both
4、内容生成




   计数器：
       可以在指定元素内容区域之前或之后，通过计数器得到一个自动生成的数字作为填充内容
       1、counter-reset 属性
          作用：声明/复位 一个计数器
 语法：counter-reset:名称 初始值;


 注意：
    1、声明计数器的位置
       计数器必须放在父元素中去声明，子元素可以无条件使用
如果页面中所有的元素统一使用一个计数器的话，那么该计数器可以声明在 body 中
             2、省略初始值
       声明计数器时，后面的初始值可以省略，如果省略则为 0。
counter-reset:c1;
等同于
counter-reset:c1 0;
    3、声明多个计数器
        1、通过多个 counter-reset 来声明
2、通过1个counter-reset 声明
   counter-reset:c1 c2;
   counter-reset:c1 10 c2 20;
       2、counter-increment 属性
          作用：设置 计数器每次使用时的增量。默认增量值为1
 counter-increment:名称 增量值;


 counter-increment:c1 1;
 等同于
 counter-increment:c1;


 注意：
   1、不设置计数器增量
      那么每次使用计数器的时候，值都是不变的。
   2、声明位置
      哪个元素要使用计数器，哪个元素中声明 计数器的增量
       3、counter() 函数
          作用：通过计数器的名称，引用/使用计数器,多数配合着 content属性一起来使用
 content:counter(名称);


     练习：
         1、HTML<h1>
  1.1 基本标记<h2>
  1.2 块级元素
  1.3 行内元素
2、CSS<h1>
  2.1 背景属性<h2>
  2.2 文本属性
  2.3 选择器
          
2、多列
   将一段文本， 显示的分割成 几列去显示
   属性：
   1、column-count 
      规定元素被拆分成几列
   2、column-gap
      规定列与列之间的间隔距离
   3、column-rule
      规定列间隔的边框的 宽度 样式 颜色
   注意：
      该组属性，有浏览器兼容性问题，需要根据不同的浏览器增加前缀
      -o- : Opera
      -webkit- : Chrom Safari
      -moz- : Firefox
      -ms-:IE
3、CSS Hack 
   1、CSSHack 三种形式
      1、类内部Hack
         在 选择器内部针对属性前后，增加浏览器的识别内容


* : ie7
- : ie6
\0 : ie8
\9\0 : ie9 ie10
      2、选择器Hack
         在浏览器前加 浏览器 识别内容
      3、HTML头部引用Hack
         通过条件注释的方式来实现样式的识别
<!-- HTML 注释 -->


<!--[if 关键字 IE 版本号]>
   待解析内容
<![endif]-->


版本号 ： IE的版本，6,7,8,9，
        可以省略，如果省略的话，判断是否为IE浏览器
关键字 ：
     省略：判断是否为指定版本的 IE 浏览器
<!--[if IE 6]>
这段内容，只有在IE6浏览器中，才能执行
<![endif]-->
     gt : 大于指定的版本(不包含)
          <!--[if gt IE 6]>
待解析内容

  
  <![endif]-->
     gte : 大于等于指定的版本(包含)
     lt : 小于指定的版本（不包含）
     lte: 小于等于指定的版本(包含)
     !:不等于指定的版本
     <!--[if !IE]>
待解析内容

     <![endif]-->