1. class is the class that sets the label, and the class attribute is used to specify which style class the element belongs to.
For example, you can add .content1 { color: red; background: #ff80c0 } to the style sheet. How to use: class="content1" .
id is the identifier of the set label . The id attribute is used to define a unique style of an element. For example, a CSS rule #content2 { font-size: larger } is used as follows: id="content2"
The concepts are different (the following two sentences are still comparable Insightful):
Class is a style, which must be defined first, and then can be applied to multiple structures/contents.
Easy to reuse. In other words, the class names can be the same.
id is a label used to distinguish different structures and contents, just like your name. If there are two people with the same name in a room, confusion will occur ;ID is to find the structure/content first, and then define the style for it;
2. Attribute priority issue
The priority of id is higher than class. You can write an example yourself. Part of the code is as follows ( is written by me, not the original author ):
##
<html>
<head>
<style type="text/css">
#aa
{
color:red
}
.aa
{
color:blue
}
</style>
</head>
<body>
<p id="aa" class="aa">I love you.</p>
</body>
</html>
3. About js
If you want to perform script operations (js) on an object in the page, you can define an id for it. Otherwise, you can only use traversing the page elements and specifying specific attributes. It is a relative waste of time and resources to find it, and it is far less simple than an ID.
The above is the detailed content of css: What is the difference between class and id in div?. For more information, please follow other related articles on the PHP Chinese website!
Animate Text on ScrollApr 12, 2025 am 09:18 AMWe covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the
SnowpackApr 12, 2025 am 09:17 AMSnowpack. Love that name. This is the new thing from the Pika people, who are on to something. It's a bundler alternative, in a sense. It runs over packages
NetNewsWire and FeedbinApr 12, 2025 am 09:15 AMNetNewsWire is one of the classic RSS apps, debuting in 2002. I was pretty stoked when it went 5.0 and was open-sourced in August 2019! You can snag it right
How to Turn a Procreate Drawing into a Web AnimationApr 12, 2025 am 09:14 AMI recently started drawing on my iPad using the Procreate app with Apple Pencil. I’m enjoying the flexibility of drawing this way. What usually keeps me from
'CSS4' UpdateApr 11, 2025 pm 12:05 PMSince I first chimed in on the CSS4¹ thing, there's been tons of more discussion on it. I'm going to round up my favorite thoughts from others here. There is
The Three Types of CodeApr 11, 2025 pm 12:02 PMEvery time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to
HTTPS is Easy!Apr 11, 2025 am 11:51 AMI've been guilty of publicly bemoaning the complexity of HTTPS. In the past, I've purchased SSL certificates from third-party vendors and had trouble
HTML Data Attributes GuideApr 11, 2025 am 11:50 AMEverything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Atom editor mac version download
The most popular open source editor
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
