Question

这个问题必须是最基本的问题，但我不清楚，所以我想问一下：

假设你有一些像这样的基本HTML：

<div class="a">
    <p class="b">something</p>
    <img class="b">
    <p class="c">something</p>
</div>

如何使用CSS选择第一个<p>元素？

我之所以感到困惑，到目前为止我认为CSS可以通过指定类型和类来工作，但似乎我不能这样做。所以我可以有：div p或div .b或.a p或.a .b但不是div .a p .b，因为我相信以及每个浏览器工具如何命名元素（如div.a p.b）

这是因为类和类型之间的空间吗？

Answer 1

这是因为类和类型之间的空间吗？

是的，空格是descendent selector。

a.b表示“类型a和类b”的元素。

a .b表示“a *.b表示”任何类型和类b的元素，它是a类型元素的后代。

Answer 2

试试这个：

.a .b { color:red; }

甚至这个（虽然它可能在旧浏览器中不起作用）：

.a p:first-child { color:red; }

如果您要使用元素名称（如img.className），则元素的名称与其类或ID名称之间不能有空格。空格用作分隔符，其行为类似于目录树：.a .b p { color:red; }与颜色的同义词是所有段落的红色，它们位于.a的中的.b中。

Answer 3

这些都应该有效......

div :first-child             //first child of a div

p:first-child                //first p

div p:first-child            //first p child of a div

.a p:first-child             //first p child of class .a

div p.b                      //p's with class .b as decedents of div

.a p.b                       //p's with class .b as decedents of class .a

没有空格，因为p.b将引用所有P与类.b

使用空格，如p .b中将使用类.b

引用P的后代

Answer 4

基本上是的，这是因为空间。因此，选择带有b类的段落可以通过以下方式实现：

.a .b {
/* Rules */
}

或者更具体：

div.a p.b {
    /* Rules */
}

而第二个规则只选择具有类b的任何p元素，该类在具有类a的div内。第一个选择任何带有类b的元素，其中任何元素都带有类a。

Answer 5

你需要做

div.a p.b

你在做什么

div .a p .b

是：获取类b elementes，查看哪一个在p中，哪一个在a类元素中，哪一个在div内。

CSS文件中空格的使用

5 个答案: