Contains (desce...LOGIN

Contains (descendant) selectors

Contains a selector, that is, adding spaces, which is used to select descendant elements under the specified label element. For example, the code in the code editor on the right:

.first span{color:red;}

This line of code will make the "cowardly" in the first paragraph of text "Rat" font color changes to red.

Please note the difference between this selector and a child selector. A child selector only refers to its direct descendants, or you can understand it as the first generation descendants that act on child elements. The descendant selector acts on all child descendant elements. Descendant selectors select with spaces, while child selectors select with ">".

Summary: > Acts on the first generation descendants of the element, and spaces act on all descendants of the element.


Next Section
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>后代选择器</title> <style type="text/css"> .first span{color:red;} .food>li{ border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ } </style> </head> <body> <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <ul class="food"> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> </ul> </body> </html>
submitReset Code
ChapterCourseware