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]-->