雲橙雨林: Html 基本說明（6.2）- Css 簡易選擇器說明-+和~的使用法

2012年7月14日星期六

再來介紹 "+" 和"~"的用法，我們先寫一段 html

HTML：

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

再來寫上最基本的css

CSS：

h1 {
      color: red;
}

輸出結果：

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

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

</style>

輸出結果：

在html 裡，我們設了兩個h2，而如果利用"+"的符號，僅能更改第h1之後的第1個h2，對於後方的h2，系統並無法使他改變
說明在利用此符號，僅能將設立標籤後面第1個更改為該樣式，其餘有相同標籤並不會一同改變，而如果要一起改變，可另一
個符號修改！
修改css如下：
CSS：

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

</style>

輸出的結果：

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

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

雲橙雨林