CSS基礎教學之基本選擇器

CSS選擇器

#1、基本選擇器

（1）「*」選擇器：通配符

描述：將會匹配所有的HTML標籤，所有的標籤都會改變的。
語法：*{ color:red; }

# 註：「*」盡量少用，因為IE6不支援。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     *{
         color:red;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

（2）標籤選擇器

描述：將符合指定的HTML標籤。

語法：h1{ color:red; }

#註：CSS標籤選擇器，與HTML標籤的名稱一樣，但不能加尖括號。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     h1{
         color:red;
     }
     p{
         color:blue;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

（3）class選擇器(類別選擇器)－類別選擇器是使用頻率最高的

描述：為一類HTML標籤加上樣式。這裡所指的「一類」是：每個HTML標籤都有一個class屬性，且class的值一樣。 class屬性是公共屬性，每個HTML標籤都有。

類別選擇器的名稱，必須以「.」開頭，後限HTML標籤的class屬性的值。如：.box{ color:red; }

註： HTML標籤的class屬性的值，不能以數字開頭。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     .NO1{
         color:red;
         background-color:#88ff66;
     }
    </style>
    </head>
    <body>
        <h1 class="NO1">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

（4）id選擇器

描述：為指定id的元素新增樣式。

註：

網頁中HTML標籤的id屬性的值，必須是唯一的。
每一個HTML標籤都有一個id的公共屬性。
id屬性一般是給JS使用的，不是讓你來加樣式的。 class屬性只能給CSS用，不能給JS用的。
id選擇器的名稱，必須以「#」開頭，後面接著HTML標記的id屬性的值。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    #NO1{
        color:blue;
        background-color:#88ff99;
    }
    .NO1{
         color:red;
         background-color:#88ff66;
     }
    </style>
    </head>
    <body>
        <h1 id="NO1">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

新建檔案

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <style type="text/css">
 *{
 color:red;
 }
 </style>
 </head>
 <body>
 <h1>习近平心中的互联网</h1>
 <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
 </body>
</html>

提交重置程式碼

自動運行

全螢幕