HTML連載17-id選擇器&類選擇器

時間 2019-12-11

標籤 html 連載選擇器欄目 HTML 简体版

原文原文鏈接

1、問題：咱們前面講了標籤選擇器有一個缺陷就是它不加選擇的把全部相同的標籤全都變成統同樣式，這對於咱們個性化定製產生了阻礙，所以咱們便引出了id選擇器，來進行特別指定進行配置樣式前端

2、id選擇器git

1.定義：根據指定的id名稱找到對應的標籤，而後設置屬性github

2.格式：微信

#id名稱｛學習

屬性：值；大數據

｝ui

3.例如：spa

 

 <style>

        p{

            color: rgb(255,45,45);

        }

        #label1{

            color:black;

        }

        #label2{

            color: #37fa1e;

        }

        #label3{

            color: blue;

        }

        #label4{

            color:green;

        }

</style>

</head>

<body>

<b id="label1"></b>

<p id="label2">遲到毀一輩子</p>

<p id="label3">早退窮三代</p>

<p id="label4">按時上下班</p>

<p id="label5">必成高富帥</p>

4.注意：.net

（1）每一個HTML標籤中都有一個屬性叫作id ,也就是說每一個標籤均可以設置id3d

（2）在同一個界面中id名稱是不能夠重複的

（3）在編寫id選擇器的時候必定要在id名稱前面加上#

（4）id名稱是有規範的：只能由字母、數字、下劃線組成的，且不能以數字開頭；id名稱不能以HTML標籤名來命名

（5）在企業開發中通常狀況下若是僅僅是爲了設置樣式，咱們通常不會使用id，由於在前端開發中id是留給js使用的，可使用類選擇器

3、類選擇器

1.定義：根據指定的類名稱找到對應的標籤，而後進行設置屬性

2.格式：

（1）寫在HTML中的與id的格式是一致的

（2）在style中：

.類名｛

屬性：值；

｝

3.例子：

    <style>

        .pp2{

            color: aqua;

        }

        .pp3{

            color:blue;

        }

</style>

</head>

<body>

<p class="pp2">遲到毀一輩子</p>

<p class="pp3">早退窮三代</p>

<p class="pp2">按時上下班</p>

<p class="pp2">必成高富帥</p>



</body>

4.注意點：

（1）每一個HTML標籤中都有一個屬性叫作class ,也就是說每一個標籤均可以設置class

（2）在同一個界面中class名稱是能夠重複的

（3）在編寫class選擇器的時候必定要在class名稱前面加上.

（4）class名稱是有規範的：只能由字母、數字、下劃線組成的，且不能以數字開頭；class名稱不能以HTML標籤名來命名(和id的命名規範同樣)

（5）使用類選擇器就是爲了設置樣式的

（6）在HTML中每一個標籤能夠同時綁定多個類名

格式：

<標籤名稱 class=「class名1 class名2 class名3」>

例如：

 

        .ppp{

            font-size: 50px;

        }

        .pppp{

            color:red;

        }

        .ppppp{

            font-family: 微軟雅黑;

        }



.......(省略中間的)

<p class="ppp pppp ppppp">實驗一下</p>

多個類名控制不一樣的屬性。

4、源碼：

d69_class_selector

d68_id_selector

地址:

https://github.com/ruigege66/HTML_learning/tree/master

2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）

3.博客園：https://www.cnblogs.com/ruigege0000/

4.歡迎關注微信公衆號：傅里葉變換，後臺回覆「禮包」獲取Java大數據學習視頻禮包