css3基础笔记-选择器

选择器

1、兄弟选择器

1、相邻兄弟选择器
         匹配指定元素的相邻【下一个】兄弟
     语法：由 + 充当结合符
           选择器1+选择器2
      2、通用兄弟选择器
         匹配某元素 【后面的】【所有指定】兄弟元素
     语法：由 ~ 充当结合符
           

2、属性选择器

通过元素的【属性以及值】去匹配不同的元素
  语法：[]
  1、[attribute]:匹配具有 atrribute属性的元素 
     [id] : 匹配所有有id属性的元素
     div[id] : 匹配所有具备id属性的div元素

  2、element[attr1][attr2]
     匹配 所有 具备 attr1属性以及attr2属性的element元素
     div[id][class]

  3、element[attr=value]
     匹配attr属性值为value的element元素
     input[type=text]
     input[type='text']
     input[type="text"]

  4、element[attr~=value]
     匹配 attr属性值为一个值列表，并在在此列表中包含独立单词value的element元素
     div[class~=warning]
     <div class="content warning important lf"></div>
     div[class~=content] : 能匹配
     div[class~=lf] : 能匹配
     div[class~=on] : 不能匹配

  5、element[attr^=value]         
     匹配attr属性值，以value开始的element元素
     ^= : 匹配开始
     div[class^=my] : 匹配class属性值以my开始的div元素

  6、element[attr$=value]
     匹配attr属性值，以value作为结束的element元素
     $= : 匹配结束
     div[class$="over"] : 匹配class属性值以over作为结束的div元素

  7、element[attr*=value]:匹配 attr属性值中【包含】value的element元素
     注意：与 element[attr~=value] 的对比
     ~= : 匹配值列表中，包含完整单词的
     *= : 匹配值中，包含指定字符的
           

3、伪类选择器

伪类选择器：匹配元素的某种状态

1、目标伪类
     突出显示活动的锚点元素
     目标：活动(被激活)的锚点元素
     语法：:target
     a:target{}
     div:target{}

  2、元素状态伪类
     多数用在表单控件上，去匹配表单控件的不同状态(启用、禁用、选中)
     1、 :enabled
         匹配每个已启用元素(所有表单控件)
     2、 :disabled
         匹配每个被禁用元素(所有表单控件)
     3、 :checked
         匹配每个已被选中的input元素(使用与radio和checkbox)

  3、结构伪类
     从标记的层次结构来匹配元素。
     1、 :first-child
     匹配属于其父元素中的首个子元素
     table tr td:first-child
     2、 :last-child
         匹配属于其父元素中的最后一个子元素
     3、 :empty
         匹配没有子元素(包含文本内容)的元素
     4、 :only-child
         匹配属于其父元素中的唯一子元素
     5、 :nth-child(n)
         匹配属于其父元素中的第n个子元素

  4、否定伪类
     将匹配的元素排除在外
     语法：:not(selector);
     eg:
       input:not([type=text]){
       }

       table tr td:not(:first-child){
       }
           

4、伪元素选择器

伪元素：匹配元素的内容

伪类:匹配元素不同的状态

1、:first-letter
    获取匹配元素的第一个字母(字符) 
 2、:first-line
    获取匹配元素的首行
 3、::selection
    匹配用户选取的部分

 :selection
 ::first-letter

 :before
 ::before

 W3C : 规定 所有的伪类选择器 全部使用 一个冒号 :
       在CSS3中，所有的伪元素选择器，全部使用两个冒号 ::
           

2、内容生成

1、内容生成

1、什么是内容生成

通过css 属性，可以将 文本、图像等一些内容插入到已有的元素内容中去

2、伪元素选择器

:before / ::before

将选择器定位到指定的元素【内容】之前

:after / ::after

将选择器定位到制定的元素【内容】之后

<a href="#" target="_blank" rel="external nofollow" >百度</a>
  a:before{

  }
  a:after{

  }
  3、内容生成属性
     属性: content
 取值：
      1、普通文本
      2、url() 函数,生成图像内容，url就是图像路径
      3、计数器
           

2、计数器

1、生成计数器的属性

属性：

counter-reset:计数器名称 初始值;

注意：如果页面中多个元素要使用同一个计数器的话，那么要将计数器声明在 body 元素中，否则计数器永远都是初始值。

声明多个计数器:
 counter-reset:计数器名称1 初始值1 计数器名称2 初始值2;

 初始值，可以省略，如果省略的话，初始值为 0
 body{
    counter-reset:c1 c2;
 }
  2、设置计数器的增量
     每次在使用之前，使计数器在原来值的基础之上增加(减少)多少。
 如果不设置计数器的增量的话，那么每次使用时，数字都是相同的。
 属性:
       counter-increment:计数器名称 增量值;
 注意：哪个元素用计数器，在哪个元素中设置增量
     div{
        counter-increment:c1 10;
     }
  3、使用计数器
     函数：counter(计数器名称)

 一般情况下，会配合内容生成属性一起使用
     div:before{
        content:"第"counter(c1)"章";
     }
           

3、多列

column-count：（分割列）规定元素被分割的列数

值：数字

column-rule:列规则 
eg:colum-rule:2px solid red;
           

条件注释：

gt : 选择大于条件版本以上的浏览器版本

gt ie 6 :条件是 大于 ie6 以上的浏览器版本才会识别

lt : 选择条件版本以下的浏览器版本，不包含条件版本

lt ie 6

gte : greater than or equal

lte : less than or equal

! :选择条件版本以外的所有版本

! ie 6

语法：

<!--[if 【判断】 浏览器版本]>
     执行内容 
  <![endif]-->
  eg:
  <!--[if IE]>
    只有在IE浏览器下，才能执行该段内容
  <![endif]-->

  <!--[if IE 6]>
    只有在IE6浏览器下，才能执行该段内容
  <![endif]-->

  只有在 IE7 以上的版本才能执行的内容，条件注释?
  <!--[if gt IE 7]>
    执行的内容
  <![endif]-->