0

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

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

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

我想用例子来解释。

4

7 回答 7

5

第一个是赋予 p 项目的类。

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

第二个是赋予 p 标签的孩子的类。

<p>
    <span class="intro">
        <a href="#">Item</a>
    </span>
</p>
于 2012-07-27T18:22:56.247 回答
1

第一条规则是

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

二是为了

<p><span class="intro"><a href="#">some</a></span></p>
于 2012-07-27T18:23:59.243 回答
1

好的，首先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中具有该类的任何a标签都会被着色。pintro

然后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中的标签，它本身在 some中，才会被着色。introp

于 2012-07-27T18:25:44.563 回答
0

第一个将影响作为具有 class 的标签a的后代的所有标签。pintro

第二个将影响所有a标签，这些标签既是具有类introAND 的元素（任何）的后代，同时也是p标签的后代。

于 2012-07-27T18:22:50.877 回答
0 
p.intro a

这发现了所有<a>的 体面<p class="intro">。

p .intro a

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

于 2012-07-27T18:23:36.127 回答
0

第一种情况将选择所有嵌套在具有“intro”类的 P 标记下方某处的 A 标记。

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

第二种情况将选择嵌套在任何类型的 DOM 元素下方某处的所有 A 标记，这些元素具有“intro”类，而“intro”类又嵌套在 a P 标记中的某处。

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

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

于 2012-07-27T18:24:03.657 回答
0 
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>
于 2012-07-27T18:30:53.860 回答