css选择器的区别？

正是这两者CSS选择器之间的区别是他们两个给我同样的效果，然后使用 '>'css选择器的区别？

名为.abc>点
名为.xyz p

.abc > p { 
 
    background-color: yellow; 
 
} 
 

 
.xyz p { 
 
    background-color: red; 
 
}

<h1>Welcome to My Homepage</h1> 
 

 
<div class="abc"> 
 
    <p>I live in Duckburg.</p> 
 
    <h2>My name is Donald</h2> 
 
    <p>I live in Duckburg.</p> 
 
    <p>I live in Duckburg.</p> 
 
    <p>I live in Duckburg.</p> 
 
</div> 
 

 
<p>My best friend is Mickey.</p> 
 

 
<p>I will not be styled.</p> 
 

 
<div class="xyz"> 
 
    <p>I live in Duckburg.</p> 
 
    <h2>My name is Donald</h2> 
 
    <p>I live in Duckburg.</p> 
 
    <p>I live in Duckburg.</p> 
 
    <p>I live in Duckburg.</p> 
 
</div>

使不同

来源

2016-04-28 user3541560

但基本上''.abc> p'将只选择其直接父母为'.abc'的'p'标签，而'xyz p'将选择任何'.xyz'（http ：//www.w3schools.com/cssref/css_selectors.asp） –

感谢所有人的帮助 – user3541560

格p

Selects all <p> elements inside <div> elements

DIV>点

Selects all <p> elements where the parent is a <div>

来源

2016-04-28 11:37:28 Jainam

使用.abc > p {}将适用于所有p元素谁是.abc直接后裔：

<div class="abc"> 
    <p>I'm affected</p> 
    <div class="test"> 
     <p>I'm not</p> 
    </div> 
</div>

使用.xyz p {}适用于内.xyz p元素，无论他们是直系后代，孙子女，曾孙子女等：

<div class="xyz"> 
    <p>I'm affected</p> 
    <div class="test"> 
     <p>I'm affected</p> 
     <div class="anothertest"> 
      <p>I'm also affected</p> 
     </div> 
    </div> 
</div>

来源

2016-04-28 11:37:32

我认为影响应该会受到影响。但实际的解决方案是正确的 –

@AdamHughes刚刚更正了拼写 - 欢呼指出。 –

>符号针对特定部分的任何直接子女，在您的案例.abc。没有它，这种风格也适用于该类别的任何子类。

来源

2016-04-28 11:37:36 CmdrSharp

css选择器的区别？

回答

相关问题