Shulou(Shulou.com)05/31 Report--

This article mainly introduces the CSS in the id selector and class selector what is the difference between the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe you read this CSS selector and class selector what the difference between the article will have a harvest, let's take a look at it.

Id and class differences: 1, id equivalent identity number is generally unchanged, can not be repeated: 2, class equivalent to the name of a person can be repeated: 3, a html tag can only be bound to one id name: 4, a html tag can be bound to multiple class names.

Introduction to id selector and class selector

The style of the html element in CSS is controlled by the CSS selector, 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. The id selector is defined with "#" and begins with #

1) id selector is defined with "#"

The following two id selectors, the first one defines the color of the element as red, and the second defines 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 of red is shown in red, while the p element with the id attribute of green is displayed in green:

This paragraph is red.

This paragraph is green.

2) id selector starts with #

The id selector can specify a specific style for HTML elements marked with a specific id.

The HTML element sets the id selector with the id attribute, and the id selector in CSS is defined with "#".

For example:

1. # para12. {3. Text-align:center;4. Color:red;5.}

2. Class selector

1. The class selector is based on a dot. Number display

Class selector is used to describe the style of a set of elements, class selector is different from id selector, 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 represented by a dot "." The number shows.

For example:

In the following example, all HTML elements that have the center class are centered.

.center {text-align:center;} heading is centered, paragraph is centered.

Effect picture:

You can also specify that specific HTML elements use class.

For example:

In the following example, all p elements are used to center the text of that element.

The heading p.center {text-align:center;} is not affected. This paragraph is centered.

Effect picture:

The class selector can be used by multiple html elements because the class attribute of the element does not need to be unique. Another html element can also have multiple class attribute values, with "." Separate the numbers. Such as

Yes, you can.

Matters needing attention

The ID attribute does not start with a number. ID that begins with a number does 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 a number! It does not work in Mozilla or Firefox

Pay attention to be careful

This is the end of the article on "what is the difference between id selector and class selector in CSS". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the difference between id selector and class selector in CSS". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.