We have used various kinds of apps in our life. In fact, its page layout is not as difficult as we think. Here we open a series of pages, summarize the basic knowledge system of the front end, and finally make a pure CSS QQ music imitation APP using the summary system.
Content of this article: CSS selector
1. General selector
1> Label selector
The common label selector is used to configure the style of the same name label, with the lowest priority. Note that the code designed can be reused as much as possible:
<style>
* {
font-family: Microsoft YaHei;
}
a {
color: crimson;
}
li {
color: yellow;
}
</style>
</head>
<body>
<a href="">java</a><a href="">java</a><a href="">java</a>
<ul>
<li>java</li>
<li>java</li>
<li>java</li>
</ul>
2> Class selector
Class selector, write a good style. You need to embed it directly with this style. The class selector takes precedence over the tag selector. In the following example, you can see that the color of the tag selector will be overwritten.
<style>
a {
color: green;
}
.me-color {
color: crimson;
}
.me-font {
font-family: Microsoft YaHei;
}
</style>
</head>
<body>
<a href="" class="me-font">java</a><br>
<a href="" class="me-color me-font">java</a><br>
<a href="">java</a><br>
<ul>
<li class="me-color">redis</li>
<li>redis</li>
<li>redis</li>
</ul>
</body>
3> ID selector
Single corresponding selector, highest level:
<style>
#a1 {
color: green;
}
.me-color {
color: crimson;
}
</style>
</head>
<body>
<a id="a1" href="" class="me-color">java</a><br>
<a href="" class="me-color">java</a><br>
<a href="">java</a><br>
</body>2. Advanced selector
1> Descendant selector:
Use path to control the effectiveness of the style. As long as the path is correct, the style will take effect. It is used to control the compliance of the style without knowing the quantity, that is to say, it is not an element, but an abstract object.
<style>
#u li {
color: red;
}
#u li a{
color: lightseagreen;
text-decoration: none;//Control whether hyperlinks underline
}
</style>
</head>
<body>
<ul id="u">
<li>java</li>
<li>java2</li>
<li>
Hello
<a href="#"> world</a>
</li>
<li>java4</li>
<li>java5</li>
</ul>
</body>2> Nth selector:
It is also an abstract selector, with precise control style.
<style>
#u li:nth-child(3n-1){
color: lightseagreen;
}
</style>
</head>
<body>
<ul id="u">
<li>java</li>
<li>java2</li>
<li>Hello</li>
<li>java4</li>
<li>java5</li>
<li>java</li>
<li>java2</li>
<li>Hello</li>
<li>java4</li>
<li>java5</li>
</ul>
</body>