CSS |元素元素选择器

概述

在 CSS 中，元素元素选择器（E F）可用于选择在父元素中的特定子元素。例如，div p 选择在 div 元素内的所有 p 元素。

语法

E F {...}

• E：元素选择器。
• F：子级选择器。

示例

<div>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项1</li>
    <li>List item 2</li>
  </ul>
  <ul>
    <li>列表项3</li>
    <li>List item 4</li>
  </ul>
  <p>这是另一个段落。</p>
</div>

/* 选择 div 元素内的所有 li 元素 */
div li {
  color: red;
}

多级元素元素选择器

通过使用空格，可以创建多级元素元素选择器，以选择更深层次的元素。例如，div ul li 可以选择在父 div 元素中的所有 ul 元素的所有 li 子元素。

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
  <ul>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
</div>

/* 选择 div 元素内的所有 li 元素 */
div li {
  color: red;
}

/* 选择 div 元素内的所有 ul 元素的所有 li 元素 */
div ul li {
  color: blue;
}

可以与其他选择器组合使用

元素元素选择器可以与其他选择器组合使用，以提高灵活性。例如，可以使用类选择器来针对特定类型的元素进行样式设置。

<div>
  <p class="highlighted">这是一个突出显示的段落。</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

/* 选择 div 元素内的所有 li 元素，并且它们的父元素是一个突出显示的段落 */
div p.highlighted + ul li {
  color: blue;
}

总结

元素元素选择器可用于选择父元素内的特定子元素。使用空格来创建多级元素元素选择器以选择更深层次的元素。还可以组合其他选择器来提高灵活性。