Question

我想知道这两行之间的区别：

p.intro a{color=# ff99ff;}
p .intro a{color=# ff99ff;}

在第一个示例中，p和.intro之间没有空格，而在第二个示例中，它们之间有空格。

我想用一些例子来解释。

Answer 1

第一个是给予p项的类。

<p class="intro">
    <a href="#">Item</a>
</p>

第二个是给p标签的孩子的课程。

<p>
    <span class="intro">
        <a href="#">Item</a>
    </span>
</p>

Answer 2

第一条规则适用于

<p class="intro"><a href="#">some</a></p>

其次是

<p><span class="intro"><a href="#">some</a></span></p>

Answer 3

好的，先p.intro a { color: #ff99ff; }

<p class="intro">This <a>link</a> is colored #ff99ff.</p>

<p>But <a>this one</a> is not.</p>

具有a类的p中的任何intro标记都会变色。

然后p .intro a { color: #ff99ff; }

<p class="intro">This <a>link</a> is colored normally.</p>

<p>And so is <a>this one</a>, but <span class="intro"><a>this one</a> is colored #ff99ff.</span></p>

<div>Also, <span class="intro"><a>this link</a></span> doesn't get colored either.</div>

此处，只有任何内a个intro类的p标记，其{{1}}类本身在{{1}}范围内，才会变色。

Answer 4

第一个会影响所有a代码，这些代码是p个代码intro的后代。

第二个会影响所有a个标记，这些标记都是类intro的元素（任意）的后代，并且同时是p标记的后代。< / p>

Answer 5

p.intro a

这会找到<a>后代的所有<p class="intro">。

p .intro a

这会查找属于<a>后代的任何元素的后代的所有intro。

Answer 6

第一种情况将选择所有A标签嵌套在P标签下面的某个地方，并带有“intro”类。

<p class="intro"><div><a>This is selected</a></div></p>

第二种情况将选择嵌套在任何类型DOM元素下面某处的所有A标记，其中“intro”类反过来嵌套在P标记的某处。

<p><div><div class="intro"><div><a>This is selected</a></div></div></div></p>

请注意，嵌套元素不必直接位于选择器中前面的元素下面。它们只需要嵌套在选择器中前面的项目中。

Answer 7

p.intro a{
  color=# ff99ff; 
}

这将对内部的<a>产生影响例如：

<p class="intro">
    <a href="#">one</a>
</p>

和

p .intro a{
  color=# ff99ff;
}

这将对位于<a>

内的班级intro内的<p>生效

示例：

<p>
    <span class="intro">
        <a href="#">one</a>
    </span>
</p>

CSS-descendent选择器

7 个答案: