Home >Web Front-end >CSS Tutorial >A new beginning for div+css web page layout design (2)
A new beginning for div+css web page layout design (2)
- 黄舟Original
- 2016-12-29 14:13:231368browse
The following introduces the selector in css
What is a selector? You will understand when you look at the following
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>The div before the curly brackets is the html tag selector, which means that all div tags in html adopt this style
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Add a few more divs here and you will find that they are all of the same style
This type of tag selector can only be effective if it is an html tag
The ID selector is introduced below
<html>
<head>
<style type="text/css">
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> </head>
<body>
<div id="a">这是一个div</div>
</body>
</html> This thing is easy to understand at a glance. Use the id selector preceded by
# and then the class selector
<html>
<head>
<style type="text/css">
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div class="a">这是一个div</div>
</body>
</html>. It is also easy to understand the class selection at a glance. Add .
Let’s talk about their differences
As the name suggests, id is a unique identifier. A label can only be used once, and its priority is higher than the class selector
And the class selector You can use multiple
<html>
<head>
<style type="text/css">
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div id="a">这是一个div</div>
<div id="a">这是一个div</div>
</body>
</html> and
<html>
<head>
<style type="text/css">
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div class="a">这是一个div</div>
<div class="a">这是一个div</div>
</body>
</html> in one tag. They are the same.
In addition, css style blocks also It’s this
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
} The last one can omit the semicolon, but it’s better to add
<html>
<head>
<style type="text/css">
#a{
background:red
}
.b{
border:solid 1px;
width:100px;
height:100px;
background:green;
}
</style> <head>
<body>
<div id="a" class="b">这是一个div</div>
</body>
</html> Since the id selector has a high priority, it will use the id selection The background color of the selector
Priority comparison
id selector》Class selector》Tag selector
But the class selector can use multiple ones on one label, which is something that the id selector cannot do
<html>
<head>
<style type="text/css">
.a{
width:100px;
height:100px;
}
.b{
border:solid 1px;
background:red;
}
</style> <head>
<body>
<div class="a b" >这是一个div</div>
</body>
</html>class="a b" Pay attention to spaces
bbb16d5278ff313f855a937b015fddf7This is a div16b28748ea4df4d9c2150843fecfba68 This is invalid
What if the contents of two class selectors conflict?
<html>
<head>
<style type="text/css">
.a{
width:100px;
height:100px;
border:solid 1px;
background:red;
}
.b{
width:100px;
height:100px;
border:solid 1px;
background:green;
}
</style> <head>
<body>
<div class="a b" >这是一个div</div>
</body>
</html> Note that the background color is different
It will use the last one in the style sheet, that is, whoever is behind whom will use the one, the answer is green
followed by This class="a b" has nothing to do with the context
The above is the content of the new beginning of div+css web layout design (2). For more related content, please pay attention to the PHP Chinese website (www.php.cn) !