A new beginning for div+css web page layout design (2)
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
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) !

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.

I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.

If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing

I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
