CSS 父类选择第一div|极客教程

CSS 父类选择第一div

在CSS中，我们经常需要选择父元素中的第一个子元素，这在设计网页布局时非常有用。本文将介绍如何使用CSS选择器来选择父元素中的第一个div元素，并提供详细的示例代码。

1. 使用:first-child伪类选择第一个div元素

我们可以使用:first-child伪类来选择父元素中的第一个div元素。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Child Example</title>
<style>
    .parent div:first-child {
        color: red;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>
</div>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用了:first-child伪类来选择父元素中的第一个div元素，并将其文字颜色设置为红色。当页面加载时，第一个div元素的文字颜色将变为红色。

2. 使用:nth-child选择第一个div元素

除了使用:first-child伪类外，我们还可以使用:nth-child选择器来选择父元素中的第一个div元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Child Example</title>
<style>
    .parent div:nth-child(1) {
        font-weight: bold;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>
</div>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用:nth-child(1)选择器来选择父元素中的第一个div元素，并将其文字设置为粗体。当页面加载时，第一个div元素的文字将变为粗体。

3. 使用:first-of-type选择第一个div元素

另一个选择父元素中的第一个div元素的方法是使用:first-of-type选择器。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First of Type Example</title>
<style>
    .parent div:first-of-type {
        background-color: lightblue;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>
</div>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用:first-of-type选择器来选择父元素中的第一个div元素，并将其背景颜色设置为浅蓝色。当页面加载时，第一个div元素的背景颜色将变为浅蓝色。

4. 使用:nth-of-type选择第一个div元素

类似于:nth-child选择器，我们还可以使用:nth-of-type选择器来选择父元素中的第一个div元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth of Type Example</title>
<style>
    .parent div:nth-of-type(1) {
        border: 2px solid green;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>
</div>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用:nth-of-type(1)选择器来选择父元素中的第一个div元素，并将其边框设置为绿色。当页面加载时，第一个div元素的边框将变为绿色。

5. 使用JavaScript选择第一个div元素

除了使用CSS选择器外，我们还可以使用JavaScript来选择父元素中的第一个div元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
<style>
    .parent div {
        font-size: 20px;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>
</div>
<script>
    const parent = document.querySelector('.parent');
    const firstDiv = parent.querySelector('div');
    firstDiv.style.color = 'purple';
</script>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用JavaScript来选择父元素中的第一个div元素，并将其文字颜色设置为紫色。当页面加载时，第一个div元素的文字颜色将变为紫色。

6. 使用jQuery选择第一个div元素

如果您习惯使用jQuery库，也可以使用它来选择父元素中的第一个div元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    .parent div {
        font-size: 20px;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>
</div>
<script>
     $(document).ready(function(){$ ('.parent div:first').css('text-decoration', 'underline');
    });
</script>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用jQuery来选择父元素中的第一个div元素，并将其文字设置为下划线。当页面加载时，第一个div元素的文字将显示下划线。

7. 使用CSS选择器选择特定class下的第一个div元素

有时候我们需要选择特定class下的第一个div元素，这时可以使用CSS选择器来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Specific Class Example</title>
<style>
    .parent .specific-class div:first-of-type {
        color: orange;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div class="specific-class">Second div</div>
    <div class="specific-class">Third div</div>
</div>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用.parent .specific-class div:first-of-type选择器来选择特定class下的第一个div元素，并将其文字颜色设置为橙色。当页面加载时，特定class下的第一个div元素的文字颜色将变为橙色。

8. 使用CSS选择器选择特定id下的第一个div元素

类似于选择特定class下的第一个div元素，我们也可以选择特定id下的第一个div元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Specific ID Example</title>
<style>
    #specific-id div:first-of-type {
        background-color: lightgreen;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div id="specific-id">Second div</div>
    <div id="specific-id">Third div</div>
</div>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用#specific-id div:first-of-type选择器来选择特定id下的第一个div元素，并将其背景颜色设置为浅绿色。当页面加载时，特定id下的第一个div元素的背景颜色将变为浅绿色。

9. 使用CSS选择器选择特定属性下的第一个div元素

有时候我们需要选择具有特定属性的第一个div元素，这时可以使用CSS选择器来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Specific Attribute Example</title>
<style>
    .parent div[data-attribute]:first-of-type {
        font-style: italic;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div data-attribute="example">Second div</div>
    <div data-attribute="example">Third div</div>
</div>
</body>
</html>

Output:

CSS 父类选择第一div

在上面的示例中，我们使用.parent div[data-attribute]:first-of-type选择器来选择具有data-attribute属性的第一个div元素，并将其文字设置为斜体。当页面加载时，具有data-attribute属性的第一个div元素的文字将显示为斜体。

10. 使用CSS选择器选择特定子元素下的第一个div元素

有时候我们需要选择特定子元素下的第一个div元素，这时可以使用CSS选择器来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Specific Child Example</title>
<style>
    .parent > div:first-of-type {
        text-transform: uppercase;
    }
</style>
</head>
<body>
<div class="parent">
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>
</div>
</body>
</html>

Output:

CSS 父类选择第一div