What is the difference between id selector and class selector in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What is the difference between id selector and class selector in css

奋力向前

Jul 09, 2021 am 10:53 AM

classcssphp

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! !

What is the difference between id selector and class selector in css

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:

What is the difference between id selector and class selector in css

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 "
.
###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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Quick Gulp Cache BustingApr 18, 2025 am 11:23 AM

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser

In Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AM

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have

Datalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AM

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of

Front Conference in ZürichApr 18, 2025 am 11:03 AM

I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited

Building a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AM

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details

Creating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AM

In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly

Staggered CSS TransitionsApr 18, 2025 am 10:46 AM

Let's say you wanted to move an element on :hover for a fun visual effect.

Using Immer for React State ManagementApr 18, 2025 am 10:41 AM

We make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state

See all articles