CSS journey-how to better understand various selectors on the second site, css journey-deep Selector

CSS journey-how to better understand various selectors on the second site, css journey-deep Selector

In the previous article, we talked about why css should be used. In this article, we will start with the selector. We all know that the browser will parse the html from the far end into the dom model. With the dom model, the html will become

Xml format. Otherwise, it is a bunch of "disorganized" strings. In this way, no one knows what the birds are, and js cannot parse various getelementbyids. Therefore, when the browser parses them into dom

After the structure, the browser can easily find the corresponding position in the dom structure based on the selectors of various css rules. The next problem is naturally serious, that is, we must have a deep understanding of the dom model.

 

I. Understanding the Dom Model

First, let's look at the following code.

1 <! DOCTYPE html> 2 
With this code, we can easily draw a dom tree.
 

When you see this dom tree, do you suddenly feel that the amount of information is very large? Because it is a tree, it has some tree features, such as "child node ", "Father's Day ",
"Brother node", "first left child", and "last left child" correspond to the various situations that I will talk about in the future, let's take a look at the feeling that html has been defaced with excellent quality ~~~~
 
1: child node
Looking for a child node is essentially divided into two types: "child node" and "finding all children (including children and grandchildren)"
 
<1> descendant Selector
First, let's take a look at the following html. I think you can easily draw a dom tree. The question below is how to draw red for all the descendant spans in the body.
1 <! DOCTYPE html> 2 

2. Child Selector
<1> ">" gameplay
This is also the second case I have mentioned. It is really very simple to look for a child node in css. You can use the> number. Is it very interesting? It is the same as jquery, right.
1 

<2> "pseudo selector"
In addition to the above method, you can also use the "pseudo selector" method in css3, which is really powerful by tmd. The next article will specifically explain it. Here we only introduce one: nth-child usage. If
You have played jquery, and everything is not a problem.
1 <! DOCTYPE html> 2 

3. sibling nodes
The sibling node is also well understood. It can be solved by using "+" In css. We can see that I have successfully drawn the second p to red below.
1 <! DOCTYPE html> 2 

4. Attribute Selector
If you have played jquery, I think this attribute selector is very clear. First, let's take a look at the example. I want to find the p element of name = test and mark it in red.
1 

So far, have you ever felt the same way as jquery? It's getting stronger and has reached the "you know" realm.
 
Ii. Speculation about the css Internal Mechanism
At the beginning of the article, the browser will apply the style of the label to the tag specified in the dom according to the "tag" defined in css. For example, I defined
P style, but how can the browser find all p elements in the dom ??? Because of the closed source, we cannot know its internal mechanism, but on jquery, we can also get a glimpse of it.
2. Because css can demonstrate the selector usage, it can be done in jquery. Then I can't wait to see how jquery extracts various selector writing methods. Let's look at the source code.
1 <! DOCTYPE html> 2 

After some searches in jquery, we can see that only the native method of the dom called queryselectorAll is called. You can also clearly see in the console that the last
Results is the p element found. For verification, I open a console under taobao page.
By now, I have roughly guessed that, at least in the chrome browser, the browser may also call the queryselectAll method to find the specified Element in the dom...
Well, that's probably so much. Understanding the dom model is the key, so that you can understand the rendering behavior of the browser in the future.