Selector groupi...LOGIN

Selector grouping

Based on the original basis, we want to set the files in the following html files to the same color. We can do this: html:

<h1>php中文网</h1>
<h2>php中文网</h2>
<h3>php中文网</h3>
<h4>php中文网</h4>

css:

h1{
  color: cadetblue;
}
h2{
    color: cadetblue;
}
h3{
    color: cadetblue;
}
h4{
    color: cadetblue;
}

This is the following The rendering:

QQ截图20161011173832.png

But we usually write css like this:

h1,h2,h3,h4{
  color: cadetblue;
}

The effect is the same, there is no change at all:

QQ截图20161011173832.png

Does this reduce a lot of code? This is called grouping of selectors. The knowledge we need to add next is the wildcard *. To achieve the same effect as before, another way is, Use wildcards.

*{  color: cadetblue;
}

In this way, if there are no settings for specific elements, color conversion will occur. Some students below will ask questions. If we don’t want them to be all the same, some of them use other settings. Well.

To solve this problem, we only need to overwrite it. If we want the last title to be black and gray, then just add the following sentence after it:

h4{    color: darkslategray;
}

In this case, we can see the following effect:

QQ截图20161011174340.png

But generally when we use wildcards, we set the margins and margins of the entire page. Like this

*{
    padding: 0px;
    margin: 0px;
}


Next Section
<!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> <h1>php中文网</h1> <h2>php中文网</h2> <h3>php中文网</h3> <h4>php中文网</h4> </body> </html>
submitReset Code
ChapterCourseware