Question

我有以下代码：

<html>
...
<div id="rdMainBody">
...
</div>
...
<div id="rdMainBody">
...
</div>
...
<div id="rdMainBody">
...
</div>
...
</html>

是否可以用css写一些只影响第一场比赛的东西，id =＆＃34; rdMainBody＆＃34; ？

在我的情况下，添加一个类不是一个可能的解决方案。

问候。

Answer 1

.rdMainBody {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #EEE;
  border: 2px solid #CCC;
  margin : 5px;
}
.rdMainBody:first-child {
  background-color: green;
}

<div class="rdMainBody"></div>
<div class="rdMainBody"></div>
<div class="rdMainBody"></div>

Answer 2

：first-child CSS选择器选择第一个元素。 W3School Example

#rdMainBody:first-child {your css}

Answer 3

您无法在同一标记中使用多个ID，这会使其无效。

而是使用类。

所以给出你的代码，这里有几个选项：

First-child

＆＃13;

.rdMainBody {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
}
.rdMainBody:first-child {
  background-color: lightblue;
}

＆＃13;

<div class="rdMainBody"></div>
<div class="rdMainBody"></div>
<div class="rdMainBody"></div>

＆＃13;

First-of-type

＆＃13;

.rdMainBody {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
}
.rdMainBody:first-of-type {
  background-color: lightblue;
}

＆＃13;

<div class="rdMainBody"></div>
<div class="rdMainBody"></div>
<div class="rdMainBody"></div>

＆＃13;

Answer 4

正如一些人所说，为多个元素添加相同的id不是有效的HTML代码。但是如果你需要这样做，我会使用jquery将一些类添加到具有所需名称的第一个id并在CSS中设置类的样式。

当您选择在文档中多次使用的ID时，它只选择第一个，因此您必须按属性选择它们，如“[id = rdMainBody]”。这将获得所有元素，然后您可以使用first（）来选择第一个元素。

   protected void onCreate(Bundle savedInstanceState) {
 //use the getIntent()method to receive the data from another activity
 Intent intent = getIntent();

//extract the string, with the getStringExtra method
String message = intent.getStringExtra(NewActivityName.EXTRA_MESSAGE);

无论如何，拥有更多具有相同名称的ID是不好的。请改用课程。

以下是我的jsfiddle。

https://jsfiddle.net/michalchovanak/q0q3vyud/

将CSS应用于具有ID或Class的第一个匹配元素

4 个答案:

First-child

First-of-type