子选择器：子选择器用于匹配指定元素的所有子元素。它给出了两个元素之间的关系。 element> element选择器选择那些作为特定父级的子级的元素。 >左侧的操作数是父元素, 右侧的操作数是children元素。
语法如下：
element > element {
// CSS Property
}例子：匹配仅<div>元素的子元素的所有<h2>元素。
<!DOCTYPE html>
< html >
< head >
< title >
CSS child Selector
</ title >
< style >
div > p {
color:white;
background: green;
padding:2px;
}
</ style >
</ head >
< body style = "text-align: center;" >
< div >
< h2 style = "color:green;" >
CSS Child Selector
</ h2 >
< p >
A computer science portal for geeks.
</ p >
</ div >
< p >Geeks Classes is a quick course to cover
algorithms questions.</ p >
< p >This paragraph will not be styled.</ p >
</ body >
</ html >输出如下：
后代选择器：后代选择器用于选择作为元素子元素(不是特定元素)的所有元素。它选择元素内部的元素, 即, 它组合了两个选择器, 以便如果第二个选择器匹配的元素的祖先元素与第一个选择器匹配, 则选择它们。
语法如下：
element element {
// CSS Property
}例子：它选择所有属于div子元素的h2元素。
<!DOCTYPE html>
< html >
< head >
< title >
CSS Descendant Selector
</ title >
< style >
div h2 {
font-size:26px;
}
</ style >
</ head >
< body style = "text-align:center;" >
< div >
< h2 style = "color:green;" >
lsbin
</ h2 >
< div >
< h2 >lsbin</ h2 >
</ div >
</ div >
< p >
lsbin in green color is
example of child Selector
< br >other GeekforGeeks is example
of descendant Selector
</ p >
</ body >
</ html >输出如下：
