为什么子选择器不工作？ [英] Why is child selector not working?

问题描述

我试图进入CSS，并有一个非常简单的情况下，孩子选择器不工作，我所期望的。

我的html：

  < div> 
< p> 
< div> Div 1< / div> 
< div> Div 2< / div> 
< span>跨度1< / span> 
< / p> 
 
< span>跨度2< / span> 
< / div> 
  

现在是否：

  p span {
 color：red; 
} 
  

NOR：

  p> span {
 color：red; 
} 
  

定位我的任何span元素。我假设两者都会定位我的Span1跨度元素。

而

  div span {
 color：red; 
} 
  

AND

  div> span {
 color：red; 
} 
  

target BOTH我的span元素（我认为只有第一个会影响两个跨

有人可以帮助我吗？

解决方案

https://jsfiddle.net/1t1z4674/ p>

看看小提琴。

< div> < p> 无效，因此您的CSS将无法使用。

请参阅此答案 http://stackoverflow.com/a/10763952/822426

---

从精细规格：

p - 段落

...]

允许的内容

b $ b

这是什么内容 ？ 演绎内容：

包含与正常字符数据混合的 。

正常字符数据就是这样：未标记的文本。 语音元素 are：

或 em em>

所以， code>< p>< div>< / div>< / p> 根据规范中列出的标签省略规则，< p> 标签由< div> 标记，其留下< / p> 标记而没有匹配的< p> 。通过在< div> < p> 标记，浏览器完全有权试图纠正$ c>：

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

您不能将< div> 在< p> 内，并从各种浏览器获得一致的结果。

您可以将< div> code>< div> 虽然如此，如果你替换< p>

您在about.com的参考资料不符合规格在w3.org，你的参考是误导你。

I´m trying to get into CSS and have a very simple case where the child selector isn´t working as I expect. I just don´t get it.

My html:

<div>
    <p>
        <div>Div 1</div>
        <div>Div 2</div>
        <span>Span 1</span>
    </p>

    <span>Span 2</span>
</div>

Now whether:

p span {
    color: red;
}

NOR:

p > span {
    color: red;
}

target any of my span elements. I would assume that both would target my "Span1" span element.

Whereas

div span {
    color: red;
}

AND

div > span {
    color: red;
}

target BOTH my span elements (I would assume only the first would affect both spans and the latter would affect only the "Span2" span element.

Can someone please help me? Thank you.

解决方案

https://jsfiddle.net/1t1z4674/

Look at the fiddle.

<div> inside <p> is invalid, therefore your CSS will not work.

Refer to this answer http://stackoverflow.com/a/10763952/822426

---

From the fine specification:

p – paragraph

[...]

Permitted contents

Phrasing content

And what is this Phrasing content? Phrasing content:

Consists of phrasing elements intermixed with normal character data.

Normal character data is just that: unmarked up text. Phrasing elements are:

a or em or strong ... [a bunch of other elements none of which are div]

So, <p><div></div></p> is not valid HTML. Per the tag omission rules listed in the spec, the <p> tag is automatically closed by the <div> tag, which leaves the </p> tag without a matching <p>. The browser is well within its rights to attempt to correct it by adding an open <p> tag after the <div>:

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

You can't put a <div> inside a <p> and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.

You can put <div> inside a <div> though so if you replace your <p> with <div class="p"> and style it appropriately, you can get what you want.

Your reference at about.com disagrees with the specification at w3.org, your reference is misleading you.

这篇关于为什么子选择器不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！