CSS

Question

谁能解释一下这两者的区别？

p a {
  color: red;
}

p > a {
  color: red;
}

谢谢。

Answer 1

'p a' 将 select 包含在 p 元素（后代）中的所有 'a' 元素，即使它们不是直接子元素。

'p>a' 只会 select p 的直接子代也是 'a' 元素。

JSFIDDLE https://jsfiddle.net/seadonk/a9mfbbax/

HTML:

<p>
    <a>CHILD A1</a>
    <span><a>DESCENDENT A2</a></span>
    <a>CHILD A3</a>
</p>

CSS:

/* DESCENDENTS WILL BE RED */
p a{
    color: white;
    background-color: red;
}

/* CHILDREN WILL BE BLUE */
p>a {
    background-color: blue;
    color: white
}

参见 W3C Schools CSS Selector Reference。

CSS - 了解子选择器

CSS - Understanding child selectors

css-selectors