CSS basics 5: class selector

CSS basics 5: class selector

I CSS class selector Overview

The class selector allows you to specify styles in a way independent of document elements. This selector can be used independently or in combination with other elements.

These selectors can only be used after the document is properly marked. Therefore, using these two selectors usually requires some ideas and plans. Apply the style

Without considering the specific design elements, the most common method is to use the class selector.

2. Modify HTML code

Before using the class selector, You need to modify the specific document tag so that the class selector works properly. To associate the style of the class selector with the element,

You must specify the class as an appropriate value.

See the following HTML code:

This heading is very important.

This paragraph is very important.

In the above Code, the class of both elements is designated as important: the first title (h1 element), and the second section (p element ).

 

Three CSS selector syntax

Then we use the following syntax to apply a style to the elements of the classification, that is, there is a dot (.) before the class name, and then combine the wildcard selector:

 

*.important {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 negative impact:

.important {color:red;}

The above two results share the same display style: The font is red.

 

The browser displays the following results:

Four-element Selector

Class selectors can be used in combination with element selectors.

For example, you may want only paragraphs to be displayed in Red:

p.important {color:red;}

The selector will now match all p elements whose class attribute contains important, but none of the other types of elements do not match, whether or not this

 

Class attribute. The selector p. important is interpreted as "all sections whose class attribute value is important ". Because the h1 element is not a paragraph, this

The selector of the rule does not match, so the h1 element does not change to red text.

The browser displays the following results:

If you really want to specify different styles for the h1 element, you can use the selector h1.important:

p.important {color:red;}h1.important {color:blue;}

This result is equivalent to the preceding result because only the p label h1 is included in the document:

 

 

.important {color:red;}

Five CSS multi-class selector

 

In the above description, we handle the situation where the class value contains a word. In HTML, a class value may contain a word list,

Words are separated by spaces.

For example, if you want to mark a specific element as both important and warning, you can write:

This paragraph is a very important warning.

The order of these two words does not matter. You can also write them as warning important.

 

Let's assume that all the elements whose class is important are in bold, while all the elements whose class is warning are in italic.

All the elements of important and warning also have a silver background. You can write:

.important {font-weight:bold;}.warning {font-weight:italic;}.important.warning {background:silver;}

The browser displays the following results:

 

By linking two class selectors, you can only select the elements that contain these class names at the same time (the order of class names is not limited ). If you select

If the table contains a class name that does not exist in the class name list, the matching will fail.

See the following rules:

.important.urgent {background:red;}

As expected, this selector will only match the p element containing the word important and urgent in the class attribute. Therefore, if a p element

 

Only the words important and warning in the class attribute cannot match. However, it can match the following elements:

This paragraph is very important.

The complete code is:

 

 

This paragraph1 is very important.

This paragraph2 is very important.

This paragraph3 is very important.

This paragraph4 is very important.

This paragraph5 is very important.

 

The browser displays the following results: