p span{color:green;}是什么选择器？

Question

如果是.p span{color:green;}我能理解成后代选择器；如果是p,span{color:green;}我能理解成分组选择符。但是这样写出来的，是什么选择器？

Answer 1

.p span{}
p span{}

估计题主的问题是问 p span 和 .p span 的区别

他们都是后代选择器：

 p span ：匹配 p标签 下的span元素

.p span ：匹配 类名为p的元素 下的span元素

另外，题主问题还是比较初级的，建议多学习CSS选择器部分的知识

Answer 2

匹配所有<p>中的所有<span>元素，其字体颜色为绿色。也是后代选择器。

后代选择器是一种结构，不是说前面的必须是类，后面的必须是标签，关键的是这两个中间是什么。

[href] .class:hover{}    这也是后代选择器。

不要拘泥于形式。

Answer 3

后代选择器 ， 选中 .p 的后代里所有的span

.p > span {xxx} 这种叫子元素选择器，和上面的后代选择器区别是这个只选中 .p 的子元素里的 span，不会选中更深嵌套层级的后代元素

<div class="p">
    <span class="s1">
          <span class="s2"></span>
    </span>
</div>
  
  <!-- .p span {} 会选中 span.s1 和 span.s2 -->
  <!-- .p > span {} 只选中 span.s1 -->