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