首頁 > web前端 > css教學 > ID選擇器與class選擇器有什麼差別

ID選擇器與class選擇器有什麼差別

清浅
發布: 2018-12-14 13:23:39
原創
9887 人瀏覽過

區別有:ID選擇器在文件中只能用一次,class選擇器可以使用多次;class選擇器可以同時為同一個元素設定多個屬性而ID選擇器不可以

平常寫程式碼的時候用div和css製作網頁時,總是會用到class和id選擇器來設定CSS的樣式,將下來在文章中將為大家介紹class與id選擇器的用法以及它們的差別,有一定的參考作用,希望對大家有所幫助

【推薦課程:CSS課程

ID選擇器與class選擇器有什麼差別

ID 選擇器

id是唯一標識一個元素的,在一個檔案中只能出現一次並且能夠非常精確的找到特定的元素

ID 選擇器前面有一個# 號,CSS中透過ID選擇器為HTML文件新增樣式

範例:

<style type="text/css">
#demo{
width:100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
登入後複製

效果圖:

ID選擇器與class選擇器有什麼差別

class選擇器

類別選擇器允許以獨立於文件元素的方式來指定樣式,該選擇器可以單獨使用,也可以與其他元素結合使用

class選擇器前面有一個「.」號

#範例

<style type="text/css">
.demo{
width:100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="demo">class选择器</div>
登入後複製

效果圖:

ID選擇器與class選擇器有什麼差別

ID 選擇器與class選擇器的差異

(1)文件使用次數:ID選擇器只能使用一次,而class選擇器可以使用多次

(2)可以使用class選擇器為一個元素同時設定多個樣式,但ID選擇器是不可以的

總結:以上就是本篇文章的全部內容了,希望透過這篇文章可以讓大家對ID選擇器和class選擇器有所了解。

以上是ID選擇器與class選擇器有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板