A new beginning for div+css web page layout design (2)-CSS Tutorial-php.cn

A new beginning for div+css web page layout design (2)

黄舟

Release： 2016-12-29 14:13:23

Original

1326 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

. 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>

Copy after login

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>

Copy after login

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
}

Copy after login

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>

Copy after login

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>

Copy after login

class="a b" Pay attention to spaces

This is a div

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>

Copy after login

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) !