Css3 選擇器說明(二) @ 雲橙雨林

依　Css3 選擇器說明(一)　可先了解選擇器的用法，再來介紹 "+" 和"~"的用法，我們先寫一段 html

HTML：

<body>
      <h1>這是魚與橙的結合網頁</h1>
      <h2>歡迎來到我們家的網頁</h2>
       <p>我有一個可愛小女兒</p>
       <h2>日期：20120613</h2>
</body>

再來寫上最基本的css

CSS：

h1 {
      color: red;
}

輸出結果：

2012-06-13_141024

現在開始修改CSS，我們先使用"+"的用處，他的意思是讓樣式性質套用於緊跟在指定元素後方的第一元素...@@，還是來看例子

CSS：

<style type="text/css">
h1 {
          color: red;
}
h1+h2{
            color:gray;
}

</style>

輸出結果：

2012-06-13_141404

在html 裡，我們設了兩個h2，而如果利用"+"的符號，僅能更改第h1之後的第1個h2，對於後方的h2，系統並無法使他改變

說明在利用此符號，僅能將設立標籤後面第1個更改為該樣式，其餘有相同標籤並不會一同改變，而如果要一起改變，可另一

個符號修改！

修改css如下：

CSS：

<style type="text/css">
h1 {
           color: red;
}
h1~h2{
            color:gray;
}

</style>

輸出的結果：

2012-06-13_141942

更改過後，可發現只要是H2的標籤都會變成灰色的，可以產生如此結果

選擇器的使用，將會依須求而改變，可此方法應用在各式排版上！

網頁設計

雲橙雨林

雲橙雨林發表在痞客邦留言(0) 人氣()

E-mail轉寄

雲橙雨林