ID選擇器與class選擇器有什么區別

來源：懂視網責編：小OO 時間：2020-11-02 22:13:46

ID選擇器與class選擇器有什么區別

平時寫代碼的時候用div和css制作網頁時，總會用到class和id選擇器來設置CSS的樣式，將下來在文章中將為大家介紹class與id選擇器的用法以及它們的區別，有一定的參考作用，希望對有所幫助。【推薦課程：CSS課程】。ID 選擇器；id是唯一標識一個元素的，在一個文件中只能出現一次并且能夠非常精準的找到特定的元素。ID 選擇器前面有一個 # 號，CSS中通過ID選擇器給HTML文檔添加樣式。例。

推薦度：

點擊下載本文 文檔為doc格式

導讀平時寫代碼的時候用div和css制作網頁時，總會用到class和id選擇器來設置CSS的樣式，將下來在文章中將為大家介紹class與id選擇器的用法以及它們的區別，有一定的參考作用，希望對有所幫助?！就扑]課程：CSS課程】。ID 選擇器；id是唯一標識一個元素的，在一個文件中只能出現一次并且能夠非常精準的找到特定的元素。ID 選擇器前面有一個 # 號，CSS中通過ID選擇器給HTML文檔添加樣式。例。

區別有：ID選擇器在文檔中只能用一次，class選擇器可以使用多次；class選擇器可以為同一個元素同時設置多個屬性而ID選擇器不可以

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

【推薦課程：CSS課程】

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>

效果圖：

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>

效果圖：