child selectorLOGIN

child selector

The matching range of the child selector is smaller than that of the descendant selector. The descendant selector matches all descendants, while the child selector only matches the first-level child elements.

E > F sub-containing selector selects elements that match F, and this element is a child element of the matched E element.

E>F

The above code is the format for creating a sub-selector, separated by a greater than sign. The code example is as follows:

.antzone>li{
  color:blue
}

The above code will only talk about the font of the first-level sub-element li under antzone The color is set to blue.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
#box > ul{
  color:blue
}
</style>
</head>
<body>
<div id="box">
  <ul>
    <li>欢迎来到PHP中文网</li>
    <li>PHP中文网欢迎您</li>
  </ul>
  <div>
    <ul>
      <li>欢迎来到PHP中文网</li>
      <li>PHP中文网欢迎您</li>
    </ul>
  </div>
</div>
</body>
</html>

You can see from the above code that only the font color in the first-level ul sub-element of the box element will be set to blue.

Next Section
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>PHP中文网</title> <style type="text/css"> #box > ul{ color: #d097ff } </style> </head> <body> <div id="box"> <ul> <li>欢迎来到PHP中文网</li> <li>PHP中文网欢迎您</li> </ul> <div> <ul> <li>欢迎来到PHP中文网</li> <li>PHP中文网欢迎您</li> </ul> </div> </div> </body> </html>
submitReset Code
ChapterCourseware