Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "CSS class selector is divided into what and how to use", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "CSS class selector divided into what and how to use" article.

(1) single class selector

The simple element selector seems too rough, for example, we want to highlight something important in bold in the document, such as the due date of the manuscript. The problem is that we are not sure in which element the deadline of the manuscript will appear, or it may appear in many different elements. At this point, we can consider using a class selector (class selector).

To use the class selector, we need to first add a class attribute to the file element, such as the due date might appear in the following element:

...

...

This allows us to use the class selector in the following ways:

P.deadline {color: red;}

H3.deadline {color: red;}

Dot "." Add the class name to form a class selector. The above two selectors select all p and h3 elements that contain the "deadline" class. The remaining elements that contain the attribute are not selected.

If we omit the element name before .outline, then all elements that contain the class will be selected:

.deadline {color: red;}

In general, we use a combination of the above two to get a more interesting style:

.deadline {color: red;}

Span.deadline {font-style: italic;}

The above code first sets the font to red for all elements that contain deadline, and adds additional italics to the text in the span element. This way, if you want the text somewhere to have an extra italic effect, just put it in.

(2) Multi-class selector

In practice, the calss attribute of an element may contain not only one word, but a string of words separated by spaces.

For example, some elements contain a "warning" class, some elements contain a "important" class, and some elements also contain a "warning important" class. The order in which attribute names appear does not matter:

Class = "warning important"

Class = "important warning"

The above two are equivalent. We want the element that contains the warning class to have an eye-catching red font, the element that contains the important attribute to have a bold font display, and the element that also contains the attributes in the above 2 to have an additional blue background (whether or not you can see the text clearly). We can use the following css code:

.warning {color: red;}

.important {font-weight: bold;}

.warning.important {background: blue;}

Of course, you can also write the third item as: .important.importance {background: blue;} has nothing to do with word order. To be clear, .attributes matches all elements that contain warning attributes, no matter how many other attributes the element contains. The same goes for the same thing. While .important.attributes matches all elements that contain both attributes, no matter how many other classes the element contains, or the order in which they appear in the class list, as long as they contain these two attributes, they will be selected!

Similarly, more than a multi-class selector, preceded by an element name, matches the specified element that contains the specified class name, for example: p.warning.important {}

P elements that contain both warning and important attributes will be matched, while other elements that also contain the above two categories will not be selected.

The above is about the content of this article on what CSS selectors are divided into and how to use them. I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to 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.