Home > Article > Web Front-end > How to select all child elements in css
How to select all child elements in css
- 青灯夜游Original
- 2021-03-09 11:23:1313453browse
You can use sub-selectors in CSS to select all sub-elements of a specified element: 1. Use the "E1 > E2{}" format to select all specified sub-elements of the specified element; 2. Use "element1 > ; *{}" format selects all child elements of the specified element.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
When an element is a child element of an element, you can use child selector matching, which selects all child elements of a specific parent. A child selector consists of two or more selectors separated by ">"; it is also called an element > element selector.
Note: The sub-selector can only select its own sub-category and second-level elements, but cannot select elements below the second level.
If you select all specified child elements of the specified element, use the following syntax
element1 > element2
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择所有指定子元素</title>
<style>
.demo > p{
background-color: palevioletred;
padding: 5px;
}
</style>
</head>
<body>
<div class="demo">
<p>段落 1</p>
<p>段落 2</p>
<span>段落 3</span>
<div>段落 4</div>
</div>
<p>段落 6</p>
<p>段落 7</p>
</body>
</html>Rendering:
[Recommended tutorial: CSS video tutorial]
If you want to recursively select all child elements, use the following syntax
element1 > * {
// CSS样式
}Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择所有子元素</title>
<style>
.demo > *{
background-color: palevioletred;
}
</style>
</head>
<body>
<div class="demo">
<p>段落 1</p>
<p>段落 2</p>
<span>段落 3</span>
<div>段落 4</div>
</div>
<p>段落 6</p>
<p>段落 7</p>
</body>
</html>Rendering:
For more programming related knowledge, please visit:programmingvideo! !
The above is the detailed content of How to select all child elements in css. For more information, please follow other related articles on the PHP Chinese website!