CSS學習02-選擇器

一、什麼是選擇器
CSS 語法由三部分構成：選擇器、屬性和值。
選擇器 (selector) 通常是你希望定義的 HTML 元素或標籤，屬性 (property) 是你希望改變的屬性，並且每個屬性都有一個值。
二、語法規範
選擇器名稱{屬性名：屬性值；……}
1.屬性與屬性之間用分號隔開。
2.屬性與屬性值之間用冒號連接。
3.如果一個屬性有多個值的話，多個值用空格隔開。
示例：

body {color: blue}

三、基本選擇器
1.標籤選擇器：選擇頁面上的一類標籤。

<style type="text/css">
        div{
            border:1px solid red;
        }
</style>//選擇了頁面上所有div標籤

2.類選擇器：規定用圓點來定義，比類選擇器靈活。

    <style type="text/css">
        .one{
            border:1px solid red;
        }
    </style>
    …
    <div class="one">***</div>//通過class引用

3.ID選擇器：用#來定義，針對特定的一個標籤。

    <style type="text/css">
        #two{
            border:1px solid red;
        }
    </style>
    …
    <h2 id="two">***</h2>//通過id調用

4.通用選擇器：用*來定義（選擇頁面上所有的標籤）。

    *{
        padding:0px;
        margin:0px;
        color:yellow;
    }

四、擴展選擇器
1.組合選擇器：用,隔開多個選擇器。

div,p,h1,.one,#two{
        border:5px double blue;
    }
    …
    <h4 class="one">***</h4>

2.關聯選擇器（後代選擇器）：用 （空格）隔開，選擇嵌套在標籤內的標籤。

h3 i { color red;}
    …
    <h3>地球<b>亞洲<i>中國</i>北京</b>天安門</h3>
    //效果：h3標籤內的i標籤的內容（“北京”）變爲紅色。

3.僞類選擇器
1)僞靜態類：link,visited只能用於超鏈

a:link{
        color red;}
a:visited{
        color yellow;}//點擊之前紅色，點擊後爲黃色

2)動態僞類：適用於各種標籤
onfocus控件獲得焦點active點擊控件的時候
hover當鼠標移動到某個控件上訪的時候

input:focus{
        border:1px solid red
        color green;}
    ...
    <input type="text" name="">//輸入時文本框變化
    p:active{
        color blue;}
    ...
    <p>valder</p>//鼠標點上去變色
    lablea:hover{
        cursor:hand;}
    ...
    <lable>feild</lable>//鼠標放上去變形狀

4.屬性選擇器
選擇標籤內的屬性，用[ ]選擇屬性。

input[type='text']{
    background-color:red;}
...
<input type="text" />//輸入框背景變爲紅色