Css選取器(上) 讓樣式無孔不入

標籤：不同的   基本   視窗   個性   .com   img   進一步   span   複雜   

css選取器    一個可以選擇樣式的工具, 這裡適用於無論是內部代碼還是外部參考 abc.css 這類型的檔案.

1. 基本選取器
   *{ }        就是一個簡單的*, 代表應用於全部. 不適合於個人化細緻化處理的頁面, 副作用是它會覆蓋原有的style, 不管好壞
   *和繼承無關, 無論是否一級標籤,是否子標籤, 一律收到*的影響.(神一般)
   p{ }        元素選取器, 或者說是標籤選取器. p可以是任何其他標籤

   #123{ }    id選取器, 如<a id ="123" href=http://">和123css檔案制定的樣式一樣</a>    id可以是任何字母或者數字. 具有唯一性,這是規範.
   .abc{ }    凡是標籤裡面有class=abc這個屬性, 這些標籤就稱為同一個類. 類CSS是一個方便作用多個標籤的樣式.

   p.abc{ }    限定abc類裡面的p標籤生效

   例子:

   html檔案

   css檔案

   效果

    

   class=abc中的所有b標籤生效

   一個標籤引用多個類樣式, 用空格隔開兩個類樣式

    

   
   [href]{ }        這是屬性選取器, 花括弧裡面的屬性範圍全部的超連結

   [type=password] { }    這是更進一步的規定, 只能是type屬性, 而且屬於密碼type類型才應用css, 其他type無效

   [href^=http]    屬性是href且 值以http開頭的, 應用css.
   [href$=.cn]        屬性是href且 值以.cn結尾的, 應用css

   [href*=baidu]    屬性值包含有baidu 的字元片段, 應用css 用於模糊搜尋‘

           html檔案

   css檔案

   效果

   其他選取器:

   [class ~=def]        某個屬性的值含有複雜或者多個字元, 匹配到指定字元的應用css

   [lang|="en"]        某個屬性的值, 含有分隔字元號- , 此方法尋找比較省效能.機器容易找到.

2. 複合選取器
   p,b,span{ }        多元素選取器. 而且可以混合搭配, 普通標籤, id ,以及class….

   p b{ } 模糊    指定某個標籤的子標籤作為css應用對象, 除了指定的子標籤,其他父標籤等不受影響

    

   p >b { } 精確    和上面一個不同的是, 指定作用於p下面的b子標籤. 如果p下面有一層span, span下面才有b, 那麼p>b要改成p>span>b

   p+b{ }        匹配p元素和旁邊的b元素

   p~b{ }        匹配p 到b (包括p和b)的所有元素, 兩點間所有元素.

3. 虛擬元素選取器

   ::first-line{ }    塊級首行應用. 視窗展開導致第一行的字數會變化, 但是已經規定了first-line要應用css, 所以無論視窗怎麼拉動,
   紅色的字會隨著視窗大小的變化而換行填紅. first-line 對於html第一行, 或者<div>的第一行有效果, 但是對於span這種內聯是沒有效果的.

   p::first-line{ }    在p的首行才有效果.

   的下半段是<span>括起的內容.

   ::first-letter        塊級首字元應用css

    

   a::before        插入指定字串到標籤前

   a::afoter        插入指定字串到標籤後    

   html檔案

   css檔案

   點擊前

   點擊後

Css選取器(上) 讓樣式無孔不入