CSS basics 6: id Selector

CSS basics 6: id Selector
Example of an id Selector

The id selector allows you to specify styles in a way independent of document elements. In some ways, the id selector is similar to a class selector, but there are some

Important differences.

Syntax

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

See the following rules:

 

*#intro { font-size:24px;background-color:#000000;color:#FF0000;}

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

 

 

#intro { font-size:24px;background-color:#000000;color:#FF0000;} 

 

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:

 

This is a paragraph of introduction.

This is a paragraph of introduction.

The running result is:

Introduction to binary id Selector

(1) Overview

The id selector can specify a specific style for HTML elements labeled with a specific id. The id attribute can only appear once in each HTML document.

The id selector is defined.

The following two id selectors can be used to define the color of the first element as red, and the color of the second element as Green:

#red {color:red;}#green {color:green;}

In the following HTML code, the p element whose id attribute is red is displayed in red, while the p element whose id attribute is green is displayed in green.

This paragraph is red.

This section is green.

The running result is:

(2) case sensitive

Note that the class selector and id selector may be case sensitive. This depends on the document language. HTML and XHTML define the class and id values

It is case sensitive. Therefore, the Case sensitivity of the class and id must match the corresponding value in the document.

Therefore, the following CSS and HTML elements are not in bold:
# Intro {font-weight: bold ;}

 

This is a paragraph of introduction.

Because the letter I is case-insensitive, the selector does not match the above element, and the running does not have the result you want.

Three independent Selector

The id selector can be used independently even if it is not used to create a derived selector:

#sidebar {border: 1px dotted #000;padding: 10px;}

According to this rule, an element with the id of sidebar will have a black dot border with a pixel width, and there will be a 10 pixel width padding around it.

(Padding, internal blank ). Earlier IE browsers may ignore this rule unless you specifically define the element to which this selector belongs:

div#sidebar {border: 1px dotted #000;padding: 10px;}

Four id selector and derived Selector

In modern la S, the id selector is often used to create a derived selector.

#sidebar p {font-style: italic;text-align: left;margin-top: 0.5em;}

The above style will only apply to paragraphs that appear in the element where id is sidebar. This element is probably a div or table unit, although it also

It may be a table or another block-level element. It can even be an inline element, for example, or,

Is invalid because it cannot be embedded in inline elements.

.

 

This is the section of the div area.

This is div area 2

This is section 2.

The running result is:

 

51 selector, multiple usage

Even if the element labeled as sidebar appears only once in the document, this id selector can be used many times as a derived selector:

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

#sidebar h2 {font-size: 1em;font-weight: normal;font-style: italic;margin: 0;line-height: 1.5;text-align: right;}

Here, unlike other p elements on the page, the p elements in the sidebar are specially processed.

The obvious difference between h2 elements is that h2 elements in sidebar are also processed differently.

Is there a class 6 selector or an id selector?

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

And can 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 appears in the document, but you do not know that it appears

On which element, you want to declare an independent id selector. For example, you may know that a given document has an id value of mostImportant.

. 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 every document will

The most important thing is that it may be in any element, and only one element can appear. 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 ):

 

 

This is important! This is important!

• This is important!

 

 

But I tried to run it in DW 8. I don't know why? Leave a question first?

Supplement: the difference between a class selector and an id selector:

Common sense:

1. A tag in HTML can only have one id, but can have multiple classes.

2. An id must be unique on an HTML page. A class can be owned by multiple tag elements.

Differences:

The 1id selector can only be applied to one specific tag (note not one type), but can be applied to multiple tags (reuse)

2. Different priorities: the id selector is greater than the class selector.

When can I use the id selector or class selector?

Generally, the id selector can be used for unique pages that are not reused, such as the page header and footer. If you need to reuse a style, it is generally used

Class selector, such as tables and lists.

Generally, more class selectors are used.