css選擇器

 

0.通配符選擇器：*
   說明: 該選擇器能夠與任何元素匹配
    * {color:red;}

1.標籤選擇器[元素選擇器]:
  說明: 使用元素名來設置樣式
 div
　　{ 
    　　color:#ff0000;
　　}


2.分組選擇器：
  說明:逗號分隔的元素都會被設置css樣式
　　div,p,ul,input
　　{
　　     color:#ff0000;
　　}


3.派生選擇器[後代選擇器]:
 說明: 
 {
　　    font-style: italic;
 　　   font-weight: normal;
　　}


4.子元素選擇器，只能選擇某元素子元素的元素
    h1 > strong {color:red;}


5.相鄰兄弟元素選擇器，可選擇緊接在另外一元素後的元素，且兩者有相同父元素
　　h1 + p {margin-top:50px;}


6.普通兄弟選擇器，匹配的元素在指定元素以後，但不必定相鄰
    div~p{color:red}

　　li strong

7.id選擇器：已#來定義
 說明: 使用元素中定義的id屬性值來設置樣式
　　#id_name
　　{
　　    color:#ff0000;
　　}
　　#id_name div
　　{
　　    color:#ff0000;
　　}
　　div #id_name
　　{
　　    color:#ff0000;
　　}

8.類選擇器：用.來顯示
 說明: 使用元素中定義的class的類名來設置樣式
　　.class_name
　　{
　　    color:#ff0000;
　　}
　　
   (1) 選擇器如今會匹配 class 屬性包含 class_name 的全部 p 元素，可是其餘任何類型的元素都不匹配，不管是否有此 class 屬性
   p.class_name
   {
       color:#ff0000;
   }
   
   (2) 多類選擇器
         兩個類選擇器連接在一塊兒，僅能夠選擇同事包含這些類名的元素（類名的順序不限）
    <p class="important warning"> This paragraph is a very important warning. </p>
 .important {font-weight:bold;} 
 .warning {font-style:italic;} 
 .

9.屬性選擇器: 能夠爲擁有指定屬性的 HTML 元素設置樣式，而不只限於 class 和 id 屬性
    註釋：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
　　自定義屬性也能夠設置。

　　(1) 爲帶有 title 屬性的全部元素設置樣式：
　　[title]
　　{
　　    color:#ff0000;
　　}
   
   (2) 多個屬性選擇器，只需將屬性選擇器連接在一塊兒便可
     例如，爲了將同時有 href 和 title 屬性的 HTML 超連接的文本設置爲紅色，能夠這樣寫：
    a[href][title] 
    {
        color:red;
    }

　　(3) 爲 title="W3School" 的全部元素設置樣式，屬性與屬性值必須徹底匹配

　　{
   　　 border:5px solid blue;
　　}

　　(4) 部分屬性值選擇，若是須要根據屬性值中的詞列表的某個詞進行選擇，則須要使用波浪號（~）
    屬性和值的選擇器-多個值: 包含指定值的 title 屬性的全部元素設置樣式。適用於由空格分隔的屬性值
 
　　{ 
　　    color:red; 
　　}
　　<h2 title="hello world">Hello world</h2>
　　<p title="student hello">Hello W3School students!</h1>
　　<h2 title="world" val='hello'>Hello world</h2>
　　<p title="student">Hello W3School students!</p>important.warning{background:silver;}
　　[title=W3School]　　[title~=hello]

　　(5)爲帶有包含指定值的 lang 屬性的全部元素設置樣式。適用於由連字符分隔的屬性值
　　[lang|=en] 
　　{
　　   color:red; 
　　}
　　<p lang="en">Hello!</p> 
　　<p lang="en-us">Hi!</p> 
　　<p lang="us">Hi!</p>
　　<p lang="zh">Hao!</p>

類型	描述
[abc^="def"]	選擇 abc 屬性值以 "def" 開頭的全部元素
[abc$="def"]	選擇 abc 屬性值以 "def" 結尾的全部元素
[abc*="def"]	選擇 abc 屬性值中包含子串 "def" 的全部元素

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素。
[attribute=value]	用於選取帶有指定屬性和值的元素。
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
[attribute|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每一個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每一個元素。
[attribute*=value]	匹配屬性值中包含指定值的每一個元素。

10.僞類選擇器：
    語法： selector : pseudo-class {property: value}  或者css類與僞類選擇器搭配  selector.class : pseudo-class {property: value}

    (1) 例如: 
         {color: #FF0000}    /* 未訪問的連接 */ 
　　　　  {color: #00FF00} /* 已訪問的連接 */ 
　　　　  {color: #FF00FF}   /* 鼠標移動到連接上 */ 
         {color: #0000FF}  /* 選定的連接 */
    
      僞類與css類配合使用：
        a : visited {color: #FF0000} 
        <a class="" href="css_syntax.asp">CSS Syntax</a>
    

    (2) :first-child 僞類
          說明: 選擇某元素的第一個子元素
        例如: p:first-child{ color:red; }  第一個規則將做爲某元素第一個子元素的全部 p 元素設置爲紅色字體 ，[是選擇某元素的第一個子元素爲p元素,若是第一子元素不是p，其餘子元素是p元素，也不會選中]a:linka:visiteda:hovera:active.redred

    (3) :lang 僞類使你有能力爲不一樣的語言定義特殊的規則。 簡單理解就是在元素所在的範圍加上指定的字符，相似插入字符功能。
　　　　<style type="text/css"> 
           
       </style> 
       <p>文字<q >段落中的引用的文字</q>文字</p>

      顯示效果: 文字+段落中的引用的文字+文字q:lang(no) 
 { 
 quotes: "+" "+";
 }lang="no"

屬性	描述	CSS
:active	向被激活的元素添加樣式。	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式。	2
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。	1
:link	向未被訪問的連接添加樣式。	1
:visited	向已被訪問的連接添加樣式。	1
:first-child	向元素的第一個子元素添加樣式。	2
:lang	向帶有指定 lang 屬性的元素添加樣式。

  11.僞元素選擇器
      (1) :first-line 僞元素，  用於向文本的首行設置特殊樣式
　　　　　　　　註釋：":first-line" 僞元素只能用於塊級元素。

        例如: p:first-line { color:#ff0000; }   只會將p元素第一行文本設置樣式

    (2) :first-letter 僞元素，用於向文本的首字母設置樣式
        例如: p:first-letter {color:#ff0000;}   只會將p元素的首字母設置樣式

    (3) :before 僞元素，能夠在元素的內容前面插入新內容
        例如: h1:before { content:url(logo.gif); }  在每一個 <h1> 元素前面插入一幅圖片

    (4) :after 僞元素， 能夠在元素的內容以後插入新內容
        例如: h1:after { content:url(logo.gif); }   在每一個 <h1> 元素後面插入一幅圖片

屬性	描述	CSS
:first-letter	向文本的第一個字母添加特殊樣式。	1
:first-line	向文本的首行添加特殊樣式。	1
:before	在元素以前添加內容。	2
:after	在元素以後添加內容。	2