CSS selector (i)

One, CSS element selector

The most common CSS selector is the element selector. In other words, the element of the document is the most basic selector.

If you set the HTML style, the selector will usually be an HTML element, such as p, H1, EM, a, or even the HTML itself:

{color:black;}  {color:blue;}  {color:silver;}

You can switch a style from one element to another.

Suppose you decide to set the above paragraph text (not the H1 element) to Gray. Just change the H1 selector to P:

{color:black;}  {color:gray;}  {color:silver;}

Type Selector

The element selector is also referred to as the type selector in the selector standard.

The type selector matches the name of the document language element type. The type selector matches every instance of the element type in the document tree. ”

The following rules match all H1 elements in the document tree:

{font-family: sans-serif;}

Second, selector grouping

Suppose you want H2 elements and paragraphs to be gray. The easiest way to achieve this is to use the following statement:

{color:gray;}

A rule is defined by placing the H2 and P selectors on the left side of the rule and separating them with commas. Its right-hand style (color:gray;) is applied to the elements referenced by these two selectors. A comma tells the browser that the rule contains two different selectors. Without this comma, the meaning of the rule would be completely different. See descendant selector.

You can group any number of selectors together without any restrictions.

For example, if you want to display many elements as gray, you can use a rule similar to the following:

{color:gray;}

tip : By grouping, authors can "compress" certain types of styles together, so that a more concise style sheet can be obtained.

Grouping offers some interesting options. For example, all rule groupings in the following example are equivalent, and each group simply shows the different ways to group selectors and declarations:

/*Group 1*/H1{Color:Silver;background: White;}H2{Color:Silver;background:Gray;}H3{Color: White;background:Gray;}h4{Color:Silver;background: White;}b{Color:Gray;background: White;}/*Group 2*/H1, H2, H4{Color:Silver;}H2, H3{background:Gray;}H1, H4, B{background: White;}H3{Color: White;}b{Color:Gray;}/*Group 3*/H1, H4{Color:Silver;background: White;}H2{Color:Silver;}H3{Color: White;}H2, H3{background:Gray;}b{Color:Gray;background: White;}

Note that group 3 uses the "claim grouping". We'll show you the "group of claims" later.

Wildcard Selector

CSS2 introduces a new simple selector-a wildcard selector (Universal selector), which is displayed as an asterisk (*). The selector can match any element, as if it were a wildcard character.

For example, the following rules can make each element in a document red:

{color:red;}

This declaration is equivalent to a group selector that lists all the elements in the document. With the wildcard selector, you can specify the Color property value of all elements in the document as red by tapping the key once (only one asterisk).

Claim grouping

We can group selectors as well as groups of claims.

Suppose you want all H1 elements to have a red background, and use a 28-pixel high Verdana font to display as blue text, you can write the following style:

{font: 28px Verdana;}  {color: blue;}  {background: red;}

But the above approach is inefficient. This is especially problematic when we create such a list for an element that has more than one style. Instead, we can group the declarations together

{font: 28px Verdana; color: White; background: black;}

This works exactly like the previous 3-row style sheet.

Note that it is important to group the declarations by using semicolons at the end of each declaration. The browser ignores whitespace characters in the style sheet. As long as you add a semicolon, you can create a style with no scruples in the following format:

{  font: 28px Verdana;   color: blue;   background: red;  }

As with selector groupings, declaring grouping is also a convenient way to shorten stylesheets, make them clearer, and be easier to maintain.

Tip : It's a good practice to add a semicolon after the last declaration of a rule. When you add another statement to a rule, you don't have to worry about forgetting to insert a semicolon.

Grouping with selectors and declarations

We can combine selectors grouping and declaring groupings in one rule, and you can use very few statements to define relatively complex styles.

The following rules specify a complex style for all headings:

{  color:Gray;   background: White;   padding: 10px;   Border: 1px solid black;   font-family: Verdana;  }

The above rule defines the style of all headings as gray text with a white background, with a padding of 10 pixels and a solid black border of 1 pixels, and the text font is Verdana.

Third, CSS class selector

Class selectors allow you to specify styles in a way that is independent of document elements.

The selector can be used alone or in combination with other elements.

Tip: These selectors can be used only when the document is properly tagged, so it is often necessary to make some ideas and plans for using the two selectors.

The most common way to apply styles without considering the elements of a specific design is to use the class selector.

Modify HTML Code

Before you can use the class selector, you need to modify the specific document tags so that the class selector works.

In order to associate the style of a class selector with an element, you must specify class as an appropriate value. Take a look at the following HTML code:

<class= "important">Thisheading is very important. </ H1 > <  class= "important">Thisparagraph is very important. </ P >

In the preceding code, the class of two elements is specified as important: the first caption (H1 Element), and the second paragraph (p element).

Grammar

We then use the following syntax to apply a style to the elements of these collations, that is, a dot (.) before the class name, and then a wildcard selector:

{color:red;}

If you only want to select all elements with the same class name, you can ignore the wildcard selector in the class selector, which has no bad effect:

{color:red;}

Combining Element Selectors

Class selectors can be used in conjunction with element selectors.

For example, you might want only paragraphs to appear in red text:

{color:red;}

The selector now matches all p elements that have the class attribute containing important, but none of the other types of elements match, regardless of whether or not this class attribute is present. The selector p.important is interpreted as: "All paragraphs whose class property value is important." Because the H1 element is not a paragraph, the selector of the rule does not match, so the H1 element does not become red text.

If you do want to specify a different style for the H1 element, you can use the selector h1.important:

{color:red;}  {color:blue;}

CSS Multi-Class Selector

In the previous section, we dealt with the case where a word was included in the class value. In HTML, a class value may contain a list of words separated by spaces . For example, if you want to mark a particular element as both important (important) and warning (warning), you can write:

<class= "Important warning">Thisparagraph is a very Important warning. </ P >

The order of the two words does not matter, written warning important also can.

We assume that all elements of class important are bold, and that all elements of class warning are italic, and that all elements in class that contain both important and warning have a silver background. You can write:

{font-weight:bold;}  {font-style:italic;}  {background:silver;}

By linking two class selectors together, you can select only the elements that contain these class names (the order of the class names is unlimited).

If a multi-class selector contains a class name that is not in the list of class names, the match fails. Take a look at the following rules:

{background:silver;}

As expected, this selector will only match the P element that contains the word important and urgent in the class attribute. Therefore, if only the word important and warning are in the class attribute of a P element, it will not match. However, it can match the following elements:

<class= "Important Urgent warning">Thisparagraph is a very Important and urgent warning. </ P >

important : In versions prior to IE7, Internet Explorer on different platforms did not handle multi-class selectors correctly.

Iv. CSS ID Selector

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

Grammar

First, there is a # number in front of the ID selector-also known as a checkerboard number or a pound sign.

Take a look at the following rules:

{font-weight:bold;}

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

{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, and there is no doubt that it refers to the value in the id attribute.

The following is an example of an actual ID selector:

<id= "Intro">This is a paragraph of introduction. </ P >

Class selector or ID selector?

As we have explained in this chapter of class selectors, you can specify classes for any number of elements. The class name important in the previous chapter is applied to the p and H1 elements, and it can also be applied to more elements.

Difference 1: Can only be used once in a document

Unlike classes, in an HTML document, the ID selector is used once, and only once.

Difference 2: Cannot use ID word list

Unlike class selectors, ID selectors cannot be used in conjunction because the ID attribute does not allow a space-delimited list of words.

Difference 3:id can contain more meanings

Similar to a class, you can select an ID independently of the element. In some cases, you know that a particular ID value appears in your document, but you do not know which element it will appear on, so you want to declare a separate ID selector. For example, you might know that there is an element with an ID value of mostimportant in a given document. You don't know whether the most important thing is a paragraph, a phrase, a list item, or a section heading. You only know that each document will have one of the most important things, it may be in any element, and only one can appear. In this case, you can write the following rules:

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

This rule matches each of the following elements (these elements cannot be present in the same document because they all have the same ID value):

<H1ID= "Mostimportant">This is important!</H1><emID= "Mostimportant">This is important!</em><ulID= "Mostimportant">This is important!</ul>

Case sensitive

Note that class selectors and ID selectors may be case-sensitive. This depends on the language of the document. HTML and XHTML define class and ID values as case-sensitive, so the case of class and ID values must match the corresponding values in the document.

Therefore, for the following CSS and HTML, the element does not become bold:

#intro {font-weight:bold;} <  ID= "Intro">This is a paragraph of introduction. </ P >

Because the case of the letter I is different, the selector does not match the above element.

CSS selector (i)