CSS 选择器用于选择不在其他元素内的元素

在本文中，我们将介绍如何使用 CSS 选择器来选择不在其他元素内的元素。在 CSS 中，我们可以使用选择器来选择不同的 HTML 元素，并对它们应用样式。有时候我们需要选择某个元素，但是又不希望选择它在特定元素内的情况，这时候我们可以使用一些特殊的选择器来实现。

阅读更多：CSS 教程

直接子元素选择器

直接子元素选择器（child combinator）用于选择某个元素的直接子元素，而不包括子元素的子元素。它使用 “>” 符号指示。例如，我们有一个 <ul> 元素包含多个 <li> 元素，我们希望选择 <ul> 元素下直接的 <li> 元素：

ul > li {
  /* 对直接子元素应用样式 */
}

相邻兄弟选择器

相邻兄弟选择器（adjacent sibling combinator）用于选择某个元素后紧接着的一个特定兄弟元素。它使用 “+” 符号指示。例如，我们有两个相邻的 <div> 元素，我们希望选择第一个 <div> 元素后的第二个 <div> 元素：

div + div {
  /* 对第二个相邻的兄弟元素应用样式 */
}

一般兄弟选择器

一般兄弟选择器（general sibling combinator）用于选择某个元素后的所有兄弟元素。它使用 “~” 符号指示。例如，我们有两个兄弟 <div> 元素，我们希望选择第一个 <div> 元素后的所有 <div> 元素：

div ~ div {
  /* 对后面的兄弟元素应用样式 */
}

否定选择器

否定选择器（negation pseudo-class）用于选择不符合特定条件的元素。它使用 “:not()” 语法指示。例如，我们有一个 <ul> 元素中包含多个 <li> 元素，我们希望选择不是第一个 <li> 元素的所有 <li> 元素：

ul li:not(:first-child) {
  /* 对不是第一个子元素的 <li> 元素应用样式 */
}

示例说明

假设我们有以下的 HTML 结构：

<div class="container">
  <h2>Title</h2>
  <p>Paragraph</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <h2>Title 2</h2>
  <p>Paragraph 2</p>
</div>

我们想要选择不在 <ul> 元素内的 <h2> 元素并应用样式。我们可以使用直接子元素选择器 “ul > h2” 来实现：

ul > h2 {
  color: red;
}

这样，只有不在 <ul> 元素内的 <h2> 元素会变成红色。

总结

在本文中，我们介绍了一些 CSS 选择器用于选择不在其他元素内的元素。我们了解了直接子元素选择器（child combinator）、相邻兄弟选择器（adjacent sibling combinator）、一般兄弟选择器（general sibling combinator）和否定选择器（negation pseudo-class）。这些选择器使我们能够更精确地选择想要的元素，并对它们应用样式。使用这些选择器可以提高 CSS 的灵活性和效果。