2014年11月27日 星期四

CSS:選擇器種類


一、Class選擇器(Class selectors)

    "."開頭,一個網頁中可以有多個class。
    (1)CSS
.header{
    color: red;
}
    (2)HTML
<div class="header">
...</div>

二、ID選擇器(ID selectors)

    "#"開頭,一個網頁中只能有一個ID選擇器
    (1)CSS
#header{color: red;}
    (2)HTML
<div id="header">...</div>

三、通用選擇器(Universal selector)

    "*"開頭,代表整張網頁都套用此設定
    (1)CSS
   *{
      color: red;
    }

    (2)HTML
 <div>紅色的</div>
 <p>紅色的</div>

四、型態選擇器(Type selectors)

    HTML中的標籤也可以直接拿來當選擇器,如"h1",h1{color: red;}

五、後代選擇器(Descendant combinator)

     E、F,利用空白鍵來區隔兩元素,表示E元素內具有F元素才成立。
    (1)CSS
h1 a {
  color: red;
}
    (2)HTML
<h1><a>文字為紅色</a></h1>

六、子選擇器(Child combinator)

     E > F,以">"區隔兩元素,表示有父子關係的元素才會套用,與後代選擇器不同點在於E及F之間不能再插入其他元素,否則就不是父子關係了。
     (1)CSS
.header > p {
  color: red;
}
    (2)HTML
<div class="header"><p>顏色為紅色的</p></div>
<div class="header"><span><p>顏色不會改變</p></span></div>

七、屬性選擇器(Attribute selectors)

    可針對標籤內的屬性作進一步修改,總共分為4種類型。
    1.div[title]:div內包含title屬性
div[title] {
  color: red;
}
<div title="xxx">顏色為紅色的</div>
    2.div[title=myTitle]:div內的title屬性=myTitle
div[title=myTitle]{
  color: green;
}
<div title="myTitle">顏色為綠色的</div>
    3.div[title~=myTitle]:只要div內的title屬性包含myTitle
div[title!=myTitle]{
  color: purple;
}
<div title="nav myTitle">顏色為紫色</div>
   4.div[title|=myTitle]:div內的title屬性開頭為myTitle
div[title|=myTitle]{
  color:  blue;
}
<div title="nav myTitle">顏色無改變</div>
<div title="myTitle nav">顏色為藍色</div>

八、同層相鄰選擇器(Adjacent sibling combinator) 

    E + F,以"+"區隔元素,表示E與F在同一層且相鄰
    1.CSS
 h1 + p{
   color: red;
 }
    2.HTML
<h1>...</h1>
<p>顏色為紅色</p>
<p>顏色不會變</p>

九、同層全體選擇器(General sibling combinator)

     E ~ F,以"~"區隔,表示E與F在同一層全部都套用
    1.CSS
 h1 ~ p{
   color: red;
 }
    2.HTML
<h1>...</h1>
<p>顏色為紅色</p>
<p>顏色為紅色</p>

十、群組選擇器(Groups of selectors)

      E,F,G,以","區隔,同時對E、F、G做設定
     1.CSS
h1,h2,p{
  color: red;
}
    2.HTML
<h1>顏色為紅色的</h1>
<h2>顏色為紅色的</h2>
<<p>顏色為紅色的</p>

十一、偽類選擇器(偽類選擇器):a:link、a:visited、a:hover、a:active
十二、偽元素選擇器::first-line以及:first-letter


沒有留言:

張貼留言