CSS Child Selector

2025年1月31日 | 阅读 5 分钟

使用 CSS 属性来选择父元素的子元素。我们可以选择单个、多个或最后一个子元素。子选择器可以帮助获取所需父元素的所有子元素。CSS 中有三种类型的子元素选择。所有子元素、nth 子元素和仅子元素都可以与 CSS 属性一起使用。我们可以通过语法和示例来查看 CSS 子元素。

语法

以下语法显示了 CSS 子选择器。

<style>
Element > child_element {
property: value;
}
</style>

示例

以下示例显示了父元素内的所有可用元素。我们可以为子元素使用 CSS 设计。

示例 1

示例显示了子选择器的基本 CSS 属性。我们可以更改字体大小、背景颜色或其他简单的设计。

<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS design of child selector */
.main_div {
background-color: #F4F2F2;
height:250px;
}
div > p {
background-color: black;
color : white;
}
section > p {
background-color: aqua;
font-size : 12px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Child Selector </h2>
<b> The child selector (>) selects all child elements of the its parent element </b>
<div class = "cards">
<p> Paragraph 1 shows the information </p>
<section>
<!-- not Child element but Descendant element -->
<p> Paragraph 2 shows the information (section element). </p>
</section>
<p> Paragraph 3 shows the information. </p>
<p> Paragraph 4 shows the information. </p>
</div>
</div>
</body>
</html>

输出

输出显示了所有基本的子元素。

示例 2

示例显示了子选择器的基本 CSS 属性。我们可以更改字体大小、边框、背景颜色或其他简单的设计。我们可以对父元素和内部子元素使用相同的 HTML 标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS design of child selector */
.main_div {
background-color: #F4F2F2;
height:260px;
border : 2px solid grey;
}
/* Same Tag of parent and child element*/
div > div {
background-color: grey;
color : white;
border : 2px solid orange;
}
/* Different Tag of parent and child element*/
div > section {
background-color: white;
font-size : 14px;
color : red;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Child Selector </h2>
<b> The child selector (>) selects all child elements of the its parent element </b>
<br>
<div class = "cards">
<p> Paragraph 1 shows the information </p>
<section>
<!-- not Child element but Descendant element -->
<p> Paragraph 2 shows the information (section element). </p>
</section>
<p> Paragraph 3 shows the information. </p>
<p> Paragraph 4 shows the information. </p>
</div>
</div>
</body>
</html>

输出

输出显示了基本的子元素。

示例 3

示例显示了子选择器的基本 CSS 属性。我们可以为所需元素的子选择器使用悬停效果。我们可以对父元素和内部子元素使用相同或不同的 HTML 标签。

<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS design of child selector */
.main_div {
background-color: #F4F2F2;
height:280px;
border : 2px solid grey;
}
/* Same Tag of parent and child element*/
div > div {
background-color: grey;
color : white;
border : 2px solid orange;
}
/* Different Tag of parent and child element*/
div > section {
background-color: white;
font-size : 14px;
color : red;

}
/* Show all child elements with hover effect */
div > div:hover {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width:80%;
margin-left:15px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Child Selector with hover effect </h2>
<b> The child selector (>) selects all child elements of the its parent element </b>
<br>
<div class = "cards">
<p> Paragraph 1 shows the information </p>
<section>
<!-- not Child element but Descendant element -->
<p> Paragraph 2 shows the information (section element). </p>
</section>
<p> Paragraph 3 shows the information. </p>
<p> Paragraph 4 shows the information. </p>
</div>
</div>
</body>
</html>

输出

输出显示了具有悬停效果的所有子元素。

示例 4

示例显示了子选择器的基本 CSS 属性。我们可以为带有 class 和 id 标签的元素的子选择器使用简单的设计和悬停效果。

<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS design of child selector */
.main_div {
background-color: #F4F2F2;
height:250px;
border : 2px solid grey;
}
/* Same Tag of parent and child element*/
.card > .value1 {
background-color: grey;
color : white;
border : 2px solid orange;
}
/* Different Tag of parent and child element*/
.main_div > .card {
background-color: white;
font-size : 14px;
color : red;
}
/* Show all child elements with hover effect */
.card > .value1:hover {
box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);
transition: 0.2s;
width:80%;
margin-left:15px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Child Selector with Tags </h2>
<b> The child selector (>) selects all child elements of the its parent element </b>
<br>
<section class = "card">
<p class = "value1"> Paragraph 1 shows the information </p>
<center class = "value2">
<!-- not Child element but Descendant element -->
<p class = "value1"> Paragraph 2 shows the information (section element). </p>
</center>
<b class = "value1"> Bold tag shows the information. </b> <br>
<i class = "value1"> Italic tag shows the information. </i>
</section>
</div>
</body>
</html>

输出

输出显示了具有悬停效果的所有子元素。

结论

CSS 子选择器引用并设计主元素的所有子元素。我们可以使用标签进行高级设计。

下一主题CSS 红色

CSS Child Selector

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Child Selector

语法

示例

结论

相关帖子

CSS Viewer

CSS 中的背景图片叠加渐变

CSS Colorful Text

CSS Font Shorthand

CSS Background-repeat Property

如何在 CSS 中创建固定表头

Bootstrap Table CSS

Responsive Image Gallery HTML CSS

Background Shorthand CSS

CSS Transform Rotate

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器