CSS 子代与后代选择器
子选择器:子选择器用于匹配指定元素的所有子元素。它给出了两个元素之间的关系。元素>元素选择器选择特定父元素的子元素。>左侧的操作数是父元素,右侧的操作数是子元素。
语法:
element > element {
// CSS Property
}
示例:匹配所有< h2 >元素,它们只是< div >元素的子元素。
<!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;" >
GeeksForGeeks
</h2>
<div>
<h2>GeeksForGeeks</h2>
</div>
</div>
<p>
GeeksforGeeks in green color is
example of child Selector
<br>other GeekforGeeks is example
of descendant Selector
</p>
</body>
</html>
输出:
版权属于:月萌API www.moonapi.com,转载请注明出处