Class selectors allow you to style styles independently of document elements

For example: .class{} (note that it starts with a dot, which is the sign of the class selector, followed by Attribute name, the specific settings are in curly brackets)

Let’s give a simple example:

html file:

 php中文网 

css file:

.div{color: cadetblue; }

In this way, customized effects can be achieved:

We have also touched on it before, using the class selector in combination with the element selector. Add another one below:

php Chinese website

Now we will modify the css file as follows:

h1.div{color: cadetblue; }

This way After adding the element description in front of the class selector, this .div will only work on h1.

Let’s take a look at the specific effect:

What we are going to talk about next is the multi-class selector: .class.class{} We have not touched this before. Let's feel it while writing: The html file lists several p fields, It’s easy to compare then:

php中文网
 
php中文网
 
php中文网

The css file does not have a selector to modify one setting, the first color is blue and black, the second font size is 20px, and the third font style is italic:

.p1{ color: cadetblue; }.p2{ font-size: 20px; }.p3{ font-style: italic; }

The following is a screenshot of the effect:

##Now we will use the multi-category selector:

Here we only need to add the css file Just change p3 to .p1.p2. In addition, modify the third p tag class when quoting in html: css:

.p1.p2{ font-style: italic; }

html:

php中文网

The following is the result picture:

Here we see that the third paragraph has modifications to the color of p1, the font size of p2, and its own italics. This It is the application of multi-category selectors.