Css uses different IDs and classes. css uses idclass

Source: Internet
Author: User

Css uses different IDs and classes. css uses idclass

In CSS, the class selector is displayed with a dot:

.center {text-align: center}

In the preceding example, all HTML elements with the center class are centered.

In the following HTML code, both h1 and p elements have center classes. This means both of them will comply with the rules in the ". center" selector.

class="center">This heading will be center-alignedclass="center">This paragraph will also be center-aligned.</p>



Css id Selector

In some respects, the ID selector is similar to the class selector, but there are also some important differences.

Syntax

First, there is a # sign in front of the ID selector, also known as the checkboard number or well number.

See the following rules:

*#intro {font-weight:bold;}

Like a class selector, the wildcard selector can be ignored in the ID selector. The previous example can also be written:

#intro {font-weight:bold;}

The effect of this selector will be the same.

The second difference is that the ID selector does not reference the value of the class attribute. Without a doubt, it must reference the value in the id attribute.

The following is an example of an actual ID selector:

<p id="intro">This is a paragraph of introduction.</p>
Class selector or ID selector?

In the class selector chapter, we have explained that classes can be specified for any number of elements. In the previous chapter, the class name important is applied to the p and h1 elements, and can also be applied to more elements.

Difference 1: it can only be used once in the document

Different from the class, the ID selector is used once in an HTML document and only once.

Difference 2: The ID word list cannot be used

Unlike the class selector, the ID selector cannot be used in combination because the ID attribute cannot have a list of words separated by spaces.

Difference 3: ID can contain more meanings

Similar to a class, you can select an ID independent of the element. In some cases, you know that a specific ID value will appear in the document, but you do not know which element it will appear on, so you want to declare an independent ID selector. For example, you may know that a given document contains an element with an ID value of mostimpant ant. You do not know whether the most important thing is a paragraph, a phrase, a list item, or a section title. You only know that each document has the most important content. It may appear in any element and only one. In this case, you can write the following rules:

#mostImportant {color:red; background:yellow;}

This rule will match the following elements (these elements cannot appear in the same document at the same time because they all have the same ID value ):


The difference between id and class in css

. Yes class # id
IDs are unique and classes can be reused.
For example, if you have the same style requirements in multiple places, you can use classes. In this way, you don't need to use multiple.
. Name {.....}
<Div class = "name"> </div>
<Div class = "name"> </div>/* is like this. You want to write the same style in multiple places.

# Idname {.......}
<Div id = "Idname"> </div>/* There is only one id.

Should I use id or class in css?

The id can be used for layout, for example, <div id = "header"> </div>, <div id = "footer"> </div>... class is generally used for style, and it is more conducive to controlling style in javascript.

If you are the only developer of a Web page, id and class do not matter. You can find an element accurately by id, and id can also set css styles, only a single element is set. A class can find one type of elements, find all elements of the same class, and perform style control in a unified manner.

If your webpage is maintained by many people, we recommend that you use class to identify the style. In this way, the style is well controlled and not prone to conflict.

The purpose of id is actually very narrow. It is used to traverse elements even in js, and the class can also find elements. In short, the function of class is stronger than id, and the use of class will never be controversial.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.