Web Front-end
CSS Tutorial
What is the difference between id selector and class selector in css
What is the difference between id selector and class selector in css
Previous article "What is CSS syntax?" Detailed introduction to usage methods and rules》Introduces the usage methods and rules of CSS syntax. The following article will take you to understand the id selector and class selector in CSS and introduce their differences. Come and learn together! !
Introduction to id selector and class selector
How to use html elements in CSS Style control is accomplished through CSS selectors. The two most commonly used selectors are the id selector and the class selector.
1. id selector
The id selector can specify a specific style for HTML elements marked with a specific id.
1, id selector is defined with "#" and starts with
#1) The id selector is defined with "#"
The following two id selectors, the first one can define the color of the element as red, and the second one can define the color of the element as green:
#red {color:red;}
#green {color:green;}In the following HTML code, the p element with the id attribute red is displayed in red, and the p element with the id attribute green is displayed in green:
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
2) The id selector is based on #Starts with
The id selector can specify a specific style for HTML elements marked with a specific id.
The HTML element uses the id attribute to set the id selector, and the id selector in CSS is defined with "#".
For example:
1. #para1
2. {
3. text-align:center;
4. color:red;
5. }2. Class selector
1. The class selector is Display
with a dot "
.". The class selector is used to describe the style of a group of elements, class Selectors are different from id selectors, and class can be used in multiple elements. The
class selector is represented by the class attribute in HTML, and in CSS, the class selector is displayed with a dot ".".
For example:
In the following example, all HTML elements with the center class are centered.
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 id="标题居中">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>Rendering:
You can also specify specific HTML Elements use classes.
For example:
In the following example, all p elements use to center the text of that element.
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 id="这个标题不受影响">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>Rendering:
class selector can be used by multiple html elements, because the element The class attribute is not necessary to ensure uniqueness. Another html element can also have multiple class attribute values, and the values are separated by ",". For example, <p class="cls1,cls2"></p> is OK.
The most basic difference between id and class
-
The prefix symbol "
.#" should be added in front of id, and the prefix symbol "#" should be added in front of class The prefix symbol "" should be added. - The id attribute can generally only be used once in a page, while class can be referenced multiple times.
- id is used as a tag of an element to distinguish different structures and contents, while class is a style that can be applied to any structure and content.
- In terms of layout ideas, we generally adhere to this principle: id determines the structure and content of the page first, and then defines the style for it: on the contrary, class defines a class first Styles, and then apply class styles to different elements and content on the page as needed.
- ###Currently, browsers allow multiple IDs with the same attribute value to appear on the same page. Under normal circumstances, they can be displayed normally, but when using JavaScript to control elements through IDs An error will occur. ###
In actual application, class is more used in text sections and page decorations, while id is more used to implement grand layouts and design containing blocks, or styles of containing boxes.
Summary: In CSS, the id selector and class selector are used to add color to elements. They make our entire page colorful.
Note
-
ID attribute should not start with a number. IDs starting with numbers will not work in Mozilla/Firefox browsers
The ID attribute can only appear once in each HTML document
The first character of the class selector cannot use numbers! It won't work in Mozilla or Firefox
Be careful
Recommended learning:CSS video tutorial
The above is the detailed content of What is the difference between id selector and class selector in css. For more information, please follow other related articles on the PHP Chinese website!
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How can you prevent a class from being extended or a method from being overridden in PHP? (final keyword)
Apr 08, 2025 am 12:03 AM
In PHP, the final keyword is used to prevent classes from being inherited and methods being overwritten. 1) When marking the class as final, the class cannot be inherited. 2) When marking the method as final, the method cannot be rewritten by the subclass. Using final keywords ensures the stability and security of your code.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to view the date of bootstrap
Apr 07, 2025 pm 03:03 PM
Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.
