class selector

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:

<div class="div">
    php中文网
</div>

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:

<h1 class="div">php Chinese website</h1>

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:

<p class="p1">php中文网</p>
<p class="p2">php中文网</p>
<p class="p3">php中文网</p>

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:

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

<p class="p1 p2">php中文网</p>

Next Section