The differences are: the ID selector can only be used once in the document, and the class selector can be used multiple times; the class selector can set multiple attributes for the same element at the same time, but the ID selector cannot
When I usually write code and use div and css to create web pages, I always use class and id selectors to set CSS styles. I will introduce the usage of class and id selectors in the following article. And their differences, it has a certain reference effect, I hope it will be helpful to everyone
[Recommended course: CSS course]
ID selector
id uniquely identifies an element. It can only appear once in a file and can be found very accurately. There is a # sign in front of the specific element
ID selector. In CSS, the ID selector is used to add styles to the HTML document
Example:
<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>
Rendering:
class selector
The class selector allows you to specify styles in a way that is independent of the document element and can be used independently. , can also be used in combination with other elements
There is a "." in front of the class selector
Example
<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>
Rendering:
The difference between ID selector and class selector
(1) Number of document uses: ID selector can only be used once, while class selector can be used multiple times
(2) You can use the class selector to set multiple styles for an element at the same time, but the ID selector is not allowed
Summary: The above is the entire content of this article , I hope this article can help everyone understand the ID selector and class selector.
The above is the detailed content of What is the difference between ID selector and class selector?. For more information, please follow other related articles on the PHP Chinese website!