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:
##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:
<p class="p1 p2">php中文网</p>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.