在CSS中,以下选择器的含义是什么?

时间:2014-10-31 13:53:50

标签: css selector

.class1 .class2
{
    margin: 3px;
    text-align: justify;
}

它是后代选择器吗?所以它适用于class =“class1”的所有元素,这些元素都在class =“class2”的元素中? 或者它是否适用于class =“class1”的所有元素以及class =“class2”的所有元素?

2 个答案:

答案 0 :(得分:2)

IT的后代,但你采取了错误的方式。

<强> WRONG

  

所有带有class =&#34; class1&#34;的元素在class =&#34; class2&#34;

的元素中

不可

  

所有元素都有class =&#34; class2&#34;在class =&#34; class1&#34;

的元素中

CSS selectors始终从DOM上的Up转到Down

答案 1 :(得分:0)

.foo .bar {}

适用于具有类bar的每个元素,该类位于具有类foo的元素内。

.foo, .bar {}

适用于具有班级foo或班级bar的每个元素。

.foo.bar {}

注意类名之间缺少空格。适用于两者foo和类bar的每个元素。

.foo > .bar {}

适用于具有类bar的每个元素,该类是具有类foo的元素的直接后代。因此 适用于<p>,而不是<a>中的<div class="foo"><p class="bar"><a class="bar"></a></p></div>

.foo + .bar {}

适用于具有类bar的每个元素,该元素紧跟在具有类foo的元素之后。例如<p>,而不是<aside>中的<div class="foo"></div><p class="bar"></p><aside class="bar"></aside>

.foo ~ .bar {}

适用于具有类bar的每个元素,该类是具有类foo跟随元素的兄弟。例如<p> <aside>中的<div class="foo"></div><div class="somethingelse"></div><p class="bar"></p><aside class="bar"></aside>