CSS选择器只获取第一层|极客教程

CSS选择器只获取第一层

在CSS中，我们经常会使用选择器来选择元素并对其应用样式。有时候我们只想选择某个元素的第一层子元素，而不包括其后代元素。本文将详细介绍如何使用CSS选择器只获取第一层子元素。

1. 子选择器（child selector）

子选择器使用>符号，可以选择某个元素的直接子元素。例如，下面的示例代码将选择所有class为parent的元素的直接子元素class为child的元素，并将其背景颜色设置为红色。

<!DOCTYPE html>
<html>
<head>
<style>
.parent > .child {
    background-color: red;
}
</style>
</head>
<body>

<div class="parent">
    <div class="child">geek-docs.com</div>
    <div class="child">geek-docs.com</div>
</div>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：所有class为parent的元素的直接子元素class为child的元素背景颜色都会变为红色。

2. 相邻兄弟选择器（adjacent sibling selector）

相邻兄弟选择器使用+符号，可以选择某个元素的下一个相邻兄弟元素。例如，下面的示例代码将选择所有class为sibling的元素后面紧跟的class为sibling的元素，并将其文字颜色设置为蓝色。

<!DOCTYPE html>
<html>
<head>
<style>
.sibling + .sibling {
    color: blue;
}
</style>
</head>
<body>

<div class="sibling">geek-docs.com</div>
<div class="sibling">geek-docs.com</div>
<div>Not a sibling</div>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：所有class为sibling的元素后面紧跟的class为sibling的元素文字颜色都会变为蓝色。

3. 通用兄弟选择器（general sibling selector）

通用兄弟选择器使用~符号，可以选择某个元素之后的所有兄弟元素。例如，下面的示例代码将选择所有class为first的元素之后的所有class为sibling的兄弟元素，并将其文字颜色设置为绿色。

<!DOCTYPE html>
<html>
<head>
<style>
.first ~ .sibling {
    color: green;
}
</style>
</head>
<body>

<div class="first">geek-docs.com</div>
<div class="sibling">geek-docs.com</div>
<div class="sibling">geek-docs.com</div>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：所有class为first的元素之后的所有class为sibling的兄弟元素文字颜色都会变为绿色。

4. 伪类选择器（pseudo-class selector）

伪类选择器可以选择元素的特殊状态，例如鼠标悬停、被点击等。下面是一个示例代码，当鼠标悬停在class为hover的元素上时，文字颜色会变为橙色。

<!DOCTYPE html>
<html>
<head>
<style>
.hover:hover {
    color: orange;
}
</style>
</head>
<body>

<div class="hover">Hover over me</div>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：当鼠标悬停在class为hover的元素上时，文字颜色会变为橙色。

5. 属性选择器（attribute selector）

属性选择器可以选择具有特定属性的元素。下面的示例代码将选择所有具有href属性的a元素，并将其文字颜色设置为紫色。

<!DOCTYPE html>
<html>
<head>
<style>
a[href] {
    color: purple;
}
</style>
</head>
<body>

<a href="geek-docs.com">Link 1</a>
<a>Link 2</a>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：所有具有href属性的a元素文字颜色都会变为紫色。

6. 结合使用选择器

我们也可以结合使用不同的选择器来实现更复杂的选择效果。下面的示例代码将选择所有class为parent的元素的直接子元素class为child的元素，并将其后面紧跟的class为sibling的元素文字颜色设置为灰色。

<!DOCTYPE html>
<html>
<head>
<style>
.parent > .child + .sibling {
    color: gray;
}
</style>
</head>
<body>

<div class="parent">
    <div class="child">geek-docs.com</div>
    <div class="sibling">Sibling 1</div>
    <div class="sibling">Sibling 2</div>
</div>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：所有class为parent的元素的直接子元素class为child的元素后面紧跟的class为sibling的元素文字颜色都会变为灰色。

7. 选择器优先级

在CSS中，选择器的优先级决定了哪个样式会被应用到元素上。通常情况下，ID选择器的优先级最高，类选择器次之，元素选择器最低。下面的示例代码演示了不同选择器的优先级。

<!DOCTYPE html>
<html>
<head>
<style>
#id {
    color: red;
}

.class {
    color: blue;
}

div {
    color: green;
}
</style>
</head>
<body>

<div id="id" class="class">geek-docs.com</div>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：文字颜色会变为红色，因为ID选择器的优先级最高。

8. 选择器的嵌套

在CSS中，我们可以嵌套选择器来实现更复杂的选择效果。下面的示例代码演示了如何嵌套选择器来选择某个元素的子元素。

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
    color: red;
}

.parent .child {
    color: blue;
}
</style>
</head>
<body>

<div class="parent">
    <div class="child">geek-docs.com</div>
</div>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：.parent元素文字颜色为红色，.parent .child元素文字颜色为蓝色。

9. 选择器的继承

在CSS中，子元素会继承父元素的样式。下面的示例代码演示了如何使用继承来实现样式的传递。

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
    color: red;
}
</style>
</head>
<body>

<div class="parent">
    <div>geek-docs.com</div>
</div>

</body>
</html>

Output:

CSS选择器只获取第一层

运行结果：.parent元素文字颜色为红色，而.parent元素内部的子元素文字颜色也会继承为红色。

10. 选择器的组合

我们也可以将多个选择器组合在一起，以逗号分隔，来同时选择多个元素。下面的示例代码演示了如何同时选择多个元素并应用相同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, h3 {
    color: purple;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

</body>
</html>

Output:

CSS选择器只获取第一层