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:

QQ截图20161011175352.png

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:

QQ截图20161011175440.png

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:

QQ截图20161011175511.png

##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:

QQ截图20161011175559.png

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.


Continuing Learning
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Title</title> </head> <body> <div class="div"> php中文网 </div> <h1 class="div">php中文网</h1> <p class="p1">php中文网</p> <p class="p2">php中文网</p> <p class="p3">php中文网</p> <p class="p1 p2">php中文网</p> </body> </html>
submitReset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!