How to select all child elements in css

青灯夜游
Release: 2023-01-03 09:28:33
Original
13527 people have browsed it

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.

How to select all child elements in css

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
Copy after login

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>
Copy after login

Rendering:

How to select all child elements in css

[Recommended tutorial: CSS video tutorial]

If you want to recursively select all child elements, use the following syntax

element1 > * {
    // CSS样式
}
Copy after login

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>
Copy after login

Rendering:

How to select all child elements in css

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template