我可以在CSS中使用+和>？

Question

这可能是一个基本问题,但对我而言,我仍然可以使用+或>在CSS中使用.

我看到许多选择器喜欢li > a或div + span等等,但我不确定有什么区别以及何时使用它们？

Answer 1

该>标志意味着选择嫡系

例:

CSS

div > ul {
   list-style: none;
}

HTML 这里的风格适用于<ul>

<div>
  <ul>
  </ul>
</div>

的+号表示选择一个相邻的兄弟

例:

CSS

p + p
{
   font-weight: bold;
} 

HTML 这里的风格适用于后者<p>

<div>
   <p></p>
   <p></p>
</div>

Answer 2

选择器在W3 CSS规范中有详细解释,但这里是摘要:

即时子选择器

该>选择是直接子选择器.在您的示例中li > a,规则将选择任何<a>元素的直接子<li>元素.

该规则将在此示例中选择锚点:

<ul>
   <li><a href="#">An anchor</a></li>
</ul>

相邻的兄弟选择器

所述+选择器是相邻的兄弟选择器.在您的示例中div + span,规则将选择<span>紧跟元素之前的任何<div>元素,以及它们共享同一父元素的位置.

在这种情况下将选择span元素:

<article>
   <div>A preceding div element</div>
   <span>This span would be selected</span>
</article>