HTML初識--選擇器

0. 前文我們講過如果僅僅依靠div是無法做出漂亮的樣式的,我們得依靠CSS.所以我們首先來了解一下什麼是選擇器.說得通俗易懂就是對HTML文檔中出現的標籤,元素進行分組,并給他設置格式

1. 元素選擇器,也被稱為類型選擇器,顧名思義就是通過元素的名字對其進行分類

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>選擇器</title>
    <style>
      /*元素選擇器,以元素作為篩選的對象*/
      div {
        font-size: 10px;
        color: pink;
      }
    </style>
  </head>
  <body>
    <div>姻緣呢,上天安排的最大嘛!</div>
    <div>哇,跑都跑得那麼帥,我真信服.</div>
    <div>血紅的月光映照著我的生命以及你的死期.</div>
  </body>
</html>

注意:

元素選擇器是寫在head中的
元素選擇器(不僅是元素選擇器,後面的類選擇器,id選擇器都是如此)的所有代碼都要寫在<style>標籤當中
基本格式為: 元素{屬性1:屬性值1; 屬性2:元素值2......}
屬性-屬性值對之間要使用";"隔離,而屬性和屬性值之間使用":"隔離,有點像python的字典

2. 類選擇器:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>選擇器</title>
    <style>
      /*元素選擇器,以元素作為篩選的對象*/
      div {
        font-size: 10px;
        color: pink;
      }
      /*類選擇器*/
      .div2 {
        font-size: 15px;
        color: black;
      }

    </style>
  </head>
  <body>
    <div>姻緣呢,上天安排的最大嘛!</div>
    <div class='div2'>哇,跑都跑得那麼帥,我真信服.</div>
    <div>血紅的月光映照著我的生命以及你的死期.</div>
  </body>
</html>

說明: 元素選擇器會把第一個和第三個div變為10px的粉色字體,而類選擇器會把第二個標籤設置為黑色,10px.

3. id選擇器:通過id選擇元素:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>選擇器</title>
    <style>
      /*元素選擇器,以元素作為篩選的對象*/
      div {
        font-size: 10px;
        color: pink;
      }
      /*類選擇器*/
      .div2 {
        font-size: 15px;
        color: black;
      }
      /*id選擇器*/
      #div3 {
        font-size: 20px;
        color: purple;
      }
    </style>
  </head>
  <body>
    <div>姻緣呢,上天安排的最大嘛!</div>
    <div class="div2">哇,跑都跑得那麼帥,我真信服.</div>
    <div id="div3">血紅的月光映照著我的生命以及你的死期.</div>
  </body>
</html>

查看結果:

每一個的格式都和選擇器中設置的一樣.

4. 層級選擇器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>選擇器</title>
    <style>     
        div p {
            font-size: 40px;
            color: purple;
        }
    </style>
</head>

<body>
    <div>姻緣呢,上天安排的最大嘛!</div>
    <div class="div2">哇,跑都跑得那麼帥,我真信服.</div>
    <div id="div3">血紅的月光映照著我的生命以及你的死期.</div>
    <span>
      用户名：<input type="text" />
    </span>
    <span>
      密码:<input type="password" />
    </span>
    <div>
        <p>
            這不是神經病,是理想.
        </p>
    </div>
</body>

</html>

說明:層級選擇器就像是脫衣服一樣,一層一層往裡面找,注意中間div和p之間是空格,如果有","表示並列,兩個元素都需要做那樣的改變

5. 屬性選擇器:通過標籤的屬性取得

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>選擇器</title>
    <style>
        input[type='text'] {
            /*屬性選擇器*/
            background-color: red;
        }
        
        input[type='password'] {
            background-color: yellowgreen;
            /*背景*/
        }
    </style>
</head>

<body>
    <div>姻緣呢,上天安排的最大嘛!</div>
    <div class="div2">哇,跑都跑得那麼帥,我真信服.</div>
    <div id="div3">血紅的月光映照著我的生命以及你的死期.</div>
    <span>
      用户名：<input type="text" />
    </span>
    <span>
      密码:<input type="password" />
    </span>
    <div>
        <p>
            這不是神經病,是理想.
        </p>
    </div>
</body>

</html>

最後說明:

我使用的編輯器是vscode,而html預覽我用的不是瀏覽器,是使用vscode的插件:HTML Preview, 使用快捷鍵Ctrl+Shift+V就能快速實現預覽,所以在一些截圖上看起來可能和你們看起來不一樣,請不要感到奇怪.