Question

我试图只选择Random unattached段落。

我已经尝试了一些我认为应该都有效的事情（见下文或

）

p:first-of-type {
  color: red;
}
.a:not(.relevant) {
  color: red;
}
.a:nth-child(1) {
  color: red;
}
.a:first-child {
  color: red;
}

<h1>Hi</h1>
<h2 class="important">Hi again</h2>
<p class="a">Random unattached paragraph</p>
<div class="relevant">
  <p class="a">first</p>
  <p class="a">second</p>
  <p>third</p>
  <p>fourth</p>
  <p class="a">fifth</p>
  <p class="a">sixth</p>
  <p>seventh</p>
</div>

他们都不这样做。我错过了什么？我知道我可以更改HTML，但我不想这样做。：）

Answer 1

正确答案是body > p

这是Purewal＆＃34;学习Web应用程序开发中的一个测试问题＆＃34;：

https://books.google.com/books?id=JLDZAgAAQBAJ&pg=PA94&lpg=PA94&dq=%E2%80%9CSelect+only+the+random,+unattached+paragraph.%E2%80%9D&source=bl&ots=2h8FEOEPar&sig=tIdTEyLid_qpzEJPmYYTIIVxM50&hl=en&sa=X&ved=0ahUKEwiqnLG588_OAhWBrB4KHYUJByYQ6AEIIjAB#v=onepage&q=%E2%80%9CSelect%20only%20the%20random%2C%20unattached%20paragraph.%E2%80%9D&f=false

本书的作者在下一段中指出了我们的答案：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors

Purewal正在说明CSS的后代和子选择器之间的区别，这就是为什么，使用为问题定义的HTML（见下文），说明该课程的最简单的答案在教学上是正确的。

<body>
<h1>Hi</h1>
<h2 class="important">Hi again</h2>
<p class="a">Random unattached paragraph</p>
<div class="relevant">
  <p class="a">first</p>
  <p class="a">second</p>
  <p>third</p>
  <p>fourth</p>
  <p class="a">fifth</p>
  <p class="a">sixth</p>
  <p>seventh</p>
</div>
</body>

摘录自：Semmy Purewal。 “学习Web应用程序开发。”

Answer 2

有很多方法。您需要确定要选择的语义含义，并根据它来设计您的选择器。

body > p.a 会选择所有p.a元素作为body标记的直接子元素（即，不嵌套在任何容器中）。
.important + p.a 会选择紧跟p.a元素之后的所有.important元素。
p.a:nth-of-type(1) 会选择第一个段落标记，如果它有类a。
p.a 会选择所有p.a个元素，然后您可以使用.relevant p.a覆盖（或撤消）您没有的任何属性想要影响。

编写良好的语义HTML应始终基于上下文，标记选择以及类和/或id属性来描述元素的目的。如果您的文档的标记不是语义的，那么您可以为要创建的组件创建一个通用的CSS选择器。

Answer 3

body > .a { color: red; }

这将仅选择.a容器外的.relevant。你也可以这样做：

.a { color: red; }
.relevant .a { color: black; }

Answer 4

我会在所有孩子的相关内创建默认规则。然后让.a的规则处理那些特定的孩子。没有箍，第n或管道。你单独添加的＆lt; p＆gt;最终将采用与.a类不同的样式。

Answer 5

...试

body > p{
    color: red;  
}

CSS：为什么没有选择正确的元素？

5 个答案: