Home > Developer > Web Develop
First, CSS descendant selector detailed
1, Vivid introduction of basic concepts
A tag is nested B inside another label A, B is the descendant of a.
Moreover, the offspring of B are also descendants of a, which is called "children and grandchildren endless also".
Like what:
<div>
<p> This P tag is the descendant of the Div </p>
<div>
Descendant selectors are used to select the descendants of a tag;
Adding a "space" between the two selectors makes up the descendant selector, and the one behind the space is the descendant.
For example:
Div p {color:red;}
It will select a bunch of P tags, as long as the p tag is nested inside a div tag, that is, as long as P has a father or ancestor is a div on the line.
Then, the font inside the selected p tag will be set to red.
2, concrete example one
Create a new page a.html, copy the following content
<style type= "Text/css" >
. Yeye div {color:red;}
</style>
<body >
<div class= "Yeye" >
Grandfather
<div>
Father
<div >
I
</div>
</div>
<div>
Uncle
<div>
Cousin
</div>
</div>
</div>
</body>
View in the browser as follows:
After the Spring Festival, Grandpa sent the red envelopes to posterity, so the descendants are set to the red font.
. Yeye div {color:red;}
Here to Grandpa added a class yeye;
Father, uncle, me, cousin, are Div, we are all the descendants of grandpa;
So with the descendant selector, it's especially easy to set the same style for us.
3. Precautions
(1) Avoid flooding of class names
Since the advent of CSS, there is a bit of the use of class name flooding.
Simply add a class name to many tags, and then use the class name selector to set the style, and when there are too many class names, your HTML structure is actually contaminated, or your HTML design is problematic.
Like this example, some people may add the class name to their father, uncle, me, cousin, and then set the style uniformly, which is better than using the descendant selector.
To give you an example of a flood of names, let's look at the following HTML source code,
<div class= "Right tabs" monkey= "search" alog-alias= "search" >
<a hidefocus= "True" class= "tab tab-hook s-bg20 g-fc5 g-fc5h curr curr-hook" data-tab= "Web" href= "#" > Web </a>& Lt;a hidefocus= "True" class= "tab tab-hook g-fc0" data-tab= "Music" href= "#" > Music </a><a hidefocus= "true" class = "tab tab-hook g-fc0" data-tab= "video" href= "#" > Videos </a><a hidefocus= "true" class= "tab tab-hook g-fc0" data-tab= "Image" href= "#" > Picture </a><a hidefocus= "true" class= "tab tab-hook g-fc0" data-tab= "Tieba" href= "#" > Paste </a><a hidefocus= "true" class= "tab tab-hook g-fc0" data-tab= "Zhidao" href= "#" > Know </a><a Hidefocus= "true" class= "tab tab-hook g-fc0" data-tab= "News" href= "#" > News </a><a hidefocus= "true" class= "tab Tab-hook g-fc0 "data-tab=" map "href=" # "> Map </a><a hidefocus=" true "class=" tab more G-fc0 "style=" "href=" # "& gt; more >></a>
</div>
Are you using a lot of class names, each a tag has a repeating Class name tab Tab-hook G-FC0
Do you know which website is the source code?
This is the source code that I copied from the Hao123.com menu.
This is the famous Hao123 website navigation network AH. Actually made such a mistake.
However, we can not blame design people, hao123 founder Li Xingping was an internet bar administrator, and professional development engineer than the former, of course not.
However, with a keen market sense of smell, hard-working spirit, the Chinese network started the opportunity to start the hao123 navigation network, which is worth all of us to learn AH.
In August 2004, Baidu bought hao123 with 11.9 million yuan and 40,000 shares.
At that time, Li Xingping is reluctant to sell their children Ah, for each webmaster, his website is his own children, but he really is not to come out hao123 the next direction of development is where, so sold to Baidu.
From Li Xingping's body, we can learn, technology, not the most important factor of success, success is a lot of factors to get together, like playing Mahjong, three missing one is playing bad.
(2) descendant selector starts from right to left
Like the following example
Div p {color:red;}
The browser will first find all the P tags, because the browser is viewed from right to left, unlike our human eyes, left to right.
After finding a p, it will look up, see if there is a tag div, if P has a father or ancestor is Div, then this p is selected.
Reference article:
Second, CSS sub-selector detailed
1, Basic concept Introduction
A son is a child.
The child selector says the son who chooses a label.
Like what
<div>
<p> This P tag is the son of Div </p>
<div>
The P tag is the next level of the Div, nested inside the Div, which is the son of the Div.
Unlike descendant selectors, using ">" in the middle of two tags makes up a sub-selector.
Like what
div > P {color:red;}
Here, set the Div's son P's font to red.
2, example
Create a new page a.html, copy and paste the following content
<style type= "Text/css" >
. Yeye div {color:red;}
. Yeye > div {margin-left:50px;}
</style>
<body >
<div class= "Yeye" >
Grandfather
<div>
Father
<div >
I
</div>
</div>
<div>
Uncle
<div>
Cousin
</div>
</div>
</div>
</body>
As follows:
Here the descendants of Grandpa Div are all red fonts, the code is as follows:
. Yeye div {color:red;}
Then set the grandfather's son left margin for 50px, is to let the son back 50 steps:
. Yeye > div {margin-left:50px;}
Because my cousin's father and I have retreated 50 steps, we are nested in the father's inside, also followed back 50 steps.
If you are adding the following style:
. Yeye > div > div {margin-left:50px;}
So, I am relative to my father, cousin relative uncle, each back 50 steps, as follows:
Now generational no mess, Grandpa first level, Dad and uncle second level, my cousin and I 3rd level, and the use of CSS to show the style of HTML also has a layered sense.
The complete code is as follows:
<style type= "Text/css" >
. Yeye div {color:red;}
. Yeye > div {margin-left:50px;}
. Yeye > div > div {margin-left:50px;}
</style>
<body >
<div class= "Yeye" >
Grandfather
<div>
Father
<div >
I
</div>
</div>
<div>
Uncle
<div>
Cousin
</div>
</div>
</div>
</body>
CSS Series (8) CSS descendant selectors and sub-selectors detailed
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
