您的位置:

CSS父元素选择器

一、父元素选择器

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。