Question

HTML：

<form id="myForm">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum 2 </p>
  <div class="section">Section 1</div>
  <div class="section1">section 2</div>
  <div class="section">Section 3</div>
  <div class="section1">section 4</div>
  <p>Lorem ipsum</p>
</form>`

CSS：

#myForm div.section1:first {
  color: red;
  font-size: 1.5em;
}

问题：如何编写CSS选择器来选择带有文本'section 2'的表单下的第一个section1 CSS类

以上的CSS无效

Answer 1

你不能像那样瞄准它，但你可以做这样的事情。基本上用默认值覆盖其余部分。

更好的方法是使用不同的标记。

＆＃13;

#myForm div.section1 {
  font-size:1.5em;color:red;
}

#myForm div.section1 ~ .section1 {
  font-size:1em;
  color:black;
}

＆＃13;

<form id="myForm">
  <p>Lorem ipsum</p><p>Lorem ipsum 2 </p>
  <div class="section">Section 1</div>
  <div class="section1">section 2</div>
  <div class="section">Section 3</div>
  <div class="section1">section 4</div>    <p>Lorem ipsum</p>
</form>

＆＃13;

Answer 2

没有:first选择器。

正如非常详细讨论的那样here，也没有:first-of-class选择器，只有一个:first-of-type。链接的答案还假设了一种解决方法，您的答案如下所示：

＆＃13;

#myForm {
  color: black;
  font-size: 15px;
}
#myForm > div.section1 {
  font-size: 19px;
  color: red;
}
#myForm > div.section1 ~ div.section1 {
  font-size: 15px;
  color: black;
}

＆＃13;

<form id="myForm">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum 2</p>
  <div class="section">Section 1</div>
  <div class="section1">Section 2</div>
  <div class="section">Section 3</div>
  <div class="section1">Section 4</div>
  <p>Lorem ipsum</p>
</form>

＆＃13;

这可以通过将所有.section1 div设置为某种样式，然后使用~选择器将其重新设置为原始样式和其他定义。

Answer 3

我认为这会使#myForm div.section1:nth-of-type(2) { font-size: 1.5em; color: red; }

如何使用CSS选择器选择特定CSS的第一种子类型

3 个答案: