CSS父元素选择器

发布时间：2023-05-20

一、父元素选择器

CSS父元素选择器使用时，用于选择元素的父元素。当选择子元素时，可以使用这个选择器来对父元素进行样式设置。 父元素选择器的选择符使用一个空格，例如：

父元素选择器{
  属性1：值1；
  属性2：值2；
}

在以下HTML代码中，我们可以使用父元素选择器来为li标签的父元素ul添加样式：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

CSS代码：

ul {
  background-color: #eee;
  padding: 10px;
}
li {
  color: #333;
}

通过父元素选择器，我们可以将原本应用于所有li元素的样式统一应用于它们的父元素，如下所示：

ul {
  background-color: #eee;
  padding: 10px;
}
ul li {
  color: #333;
}

二、CSS元素选择器

CSS元素选择器使用标签名作为选择器，它可以选取文档中所有符合条件的元素，并为其设置相应的样式属性。 例如，在以下HTML代码中，我们使用元素选择器为所有h1标签设置样式：

<h1>标题一</h1>
<h1>标题二</h1>
<h1>标题三</h1>

CSS代码：

h1 {
  color: red;
}

三、CSS兄弟元素选择器

CSS兄弟元素选择器用于对同一个父元素下的兄弟元素进行选择。 例如，在以下HTML代码中，我们使用兄弟元素选择器来为紧接在input元素后的p元素设置样式：

<div>
  <label>用户名：</label>
  <input type="text" name="username">
  <p>请输入用户名</p>
</div>

CSS代码：

input + p {
  color: red;
}

以上CSS代码会选择input元素紧接着后面的p元素，并将其文本颜色设置为红色。

四、CSS元素选择器不包括

CSS元素选择器不包括使用伪类选择器在指定元素之外定义样式。 例如，在以下HTML代码中，我们使用元素选择器选择所有的p元素，但不选择第一个p元素：

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
</div>

CSS代码：

p:not(:first-of-type) {
  color: red;
}

以上CSS代码会将第二和第三个p元素的文本颜色设为红色。

五、CSS选择器子元素选择器

CSS选择器子元素选择器是指直接子元素选择器，它可以选择某个元素下的一个特定子元素。 例如，在以下HTML代码中，我们使用子元素选择器为div元素下的第一个p元素设置样式：

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

CSS代码：

div > p:first-child {
  color: red;
}

以上CSS代码会将第一个p元素的文本颜色设为红色。

六、CSS选择父级元素

CSS选择父级元素，即使用伪类:has()选择某个元素下的特定父元素并设置其样式属性。 例如，在以下HTML代码中，我们使用选择父级元素的方法为所有包含ul元素的li元素背景色设为#eee：

<ul>
  <li>列表项1</li>
  <li>列表项2
    <ul>
      <li>子列表项1</li>
      <li>子列表项2</li>
    </ul>
  </li>
  <li>列表项3</li>
</ul>

CSS代码：

li:has(ul) {
  background-color: #eee;
}

以上CSS代码会将包含ul元素的li元素的背景色设为#eee。

七、CSS父类选择器

CSS父类选择器，即使用选择器A B的形式，表示选择器B是选择器A的后代元素。 例如，在以下HTML代码中，我们使用父类选择器为div元素下的所有p元素设置样式：

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

CSS代码：

div p {
  color: red;
}

以上CSS代码会将所有div元素内的p元素的文本颜色设为红色。

八、CSS根据子级找父级元素

CSS根据子级找父级元素是在后代选择器和父元素选择器的结合中，为了选择最外层的元素而使用的方法。 例如，在以下HTML代码中，我们使用根据子级找父级元素的方法为第一个ul元素中的所有li元素设置样式：

<div>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
  <ul>
    <li>列表项3</li>
    <li>列表项4</li>
  </ul>
</div>

CSS代码：

div > ul:first-child li {
  color: red;
}

以上CSS代码会将第一个ul元素内的li元素的文本颜色设为红色。

九、CSS子元素选择父元素

CSS子元素选择父元素是指选择子元素时影响到它的父元素。我们可以使用子元素选择器为下级元素设置样式，同时也能影响到更上层元素。 例如，在以下HTML代码中，我们使用子元素选择器为div元素下的第一个p元素设置样式，并将其上层div元素的背景色设为#eee：

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

CSS代码：

div > p:first-child {
  color: red;
}
div {
  background-color: #eee;
}

以上CSS代码会将第一个p元素的文本颜色设为红色，并将其上层div元素的背景色设为#eee。

推荐文章