css descendant selectors include: 1. "Parent element * {}", find all descendant elements from the parent element. 2. "Parent Children {}" is to find the specified child element from the parent element; 3. "Parent Child 1 Child 2 {}" is to find the child 1 from the parent, and then from the child Generation 1 finds descendant 2.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The descendant selector is also called the containing selector.
The descendant selector can select elements that are descendants of an element.
Descendant selector concentrated form:
1, Parent * {}
Find all descendants from Parent.
2, parent generation child1{}
is to find child1 from the parent generation or parent generation child2{}
is to be found from the parent generation Offspring 2.
3, Parent Generation Child 1 Child 2{}
This is to find Child 1 from Parent Generation, and then find Child 2 from Child 1.
The first form: Although all are selected, * has a lower priority.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ padding: 20px; background: rgba(255,0,0,0.2); //这是给它一个红色,透明度为0.2 } .a *{ border: 2px solid black; //这里是选中类a的所有后代 } </style> </head> <body> <div class="a">a <div class="b">b <div class="c">c</div> </div> </div> </body> </html>
Second form:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ padding: 20px; background: rgba(255,0,0,0.2); } .a .b{ border: 2px solid black; //同理这里选择 .c 也是可以的因为他们都是 .a 的后代。 } </style> </head> <body> <div class="a">a <div class="b">b <div class="c">c</div> </div> </div> </body> </html>
The third form: it cannot select .b and .c at the same time, only .c.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ padding: 20px; background: rgba(255,0,0,0.2); } .a .b .c{ border: 2px solid black; } </style> </head> <body> <div class="a">a <div class="b">b <div class="c">c</div> </div> </div> </body> </html>
Another thing to note is the following code: a p is nested in a p with a class name of c, and a p with a class name of c is nested in it. At this time, it will also be selected
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ padding: 20px; background: rgba(255,0,0,0.2); } .a .b .c{ border: 2px solid black; } </style> </head> <body> <div class="a">a <div class="b">b <div class="c">c <div> <div class="c">span</div> </div> </div> </div> </div> </body> </html>
(Learning video sharing: css video tutorial)
The above is the detailed content of What are the css descendant selectors?. For more information, please follow other related articles on the PHP Chinese website!