相关疑难解决方法(0)

说我有这个标记:

<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>

现在这些div在标记中不一定是彼此相邻的,但可以在整个页面中传播.

我是否可以仅使用CSS定位第一次出现的类"当前",我最好避免使用javascript(现在)？

IE浏览器.

.current:first-child {
background: red;
}

嗨,大家好,

我是编码的新手,有一个我无法弄清楚的非常简单的问题.在下面的代码中,如何在CSS中选择第一段而不是第二段？我想对第一段只做一些操作!我已经尝试过nth-child(1),但它没有用.请帮忙!

<div class="about" id="about">
        <div class="container">
            <h1>Who Am I?</h1>
            <img src="images/MyFace.jpg">
            <p>paragraph1</p>
            <p>paragraph 2!</p>
        </div>

在这个例子中,我如何定位第一个.list-group-title？理想情况下,这适用于.list-group-title可能是第一个,第二个或第三个div的其他实例,但我总是想要定位第一个.list-group-title.

<div class="content-sidebar">
  <div class="list-group-divider">…</div>
  <div class="list-group-item list-group-title">…</div>
  <div class="list-group-divider">…</div>
  <div class="list-group-item list-group-title">…</div>
  <div id="ember1956" class="ember-view">…</div>
  <div class="list-group-item list-group-title">…</div>
</div>

我试过了:

.list-group-title:first-of-type 

这不起作用,我试过:

.list-group-title:nth-child(2)

但如果它不是另一个例子中的第二个div,这将无法解决它.

有没有办法实现这个？

如果这是一个错误或我的理解很差,请澄清我.

我试图将第一个类型的选择器应用于一组div和p标签,并发现每个选择器的行为都不同.它只选择div标签的.form__group类而不是p标签

/* css */

.form__group:first-of-type {
  background: red;
}
.form__group:first-of-type span {
  font-weight: bold;
}

<!-- form__group class for p tag -->

<form class="form">
  <p class="form__message">test</p>
  <p class="form__group">
    <span>The first paragraph.</span>
  </p>
  <p class="form__group">The second paragraph.</p>
</form>

<!-- form__group class for div tag -->
<form class="form">
  <p class="form__message">test</p>
  <div class="form__group">
    <span>The fourth paragraph.</span>
  </div>
  <div class="form__group">The fifth paragraph.</div>
</form>

请看这个小提琴https://jsfiddle.net/sabarigr/52vu5dks/

我是编程初学者。我正在尝试从头开始建立一个投资组合。在我的导航栏中，我想选择第一个链接以不同的颜色。谁能告诉我从无序列表中选择第一个链接的最佳方法？

<ul id="main-nav">
    <li>
      <a href="#" class="nav-links">
        <i class="fas fa-home"></i>Home</a>
    </li>
    <li>
      <a href="#about" class="nav-links"><i class="fas fa-info-circle"></i>About Me</a>
    </li>
    <li>
      <a href="#portfolio" class="nav-links"><i class="fas fa-image"></i>Portfolio</a>
    </li>
    <li>
      <a href="#contact" class="nav-links"><i class="fas fa-envelope"></i>Contact</a>
    </li>
  </ul>

:)

为什么我的第一段没有红色背景？

HTML:

    <div class="item">
        <h1><a href="http://localhost/test">Test</a></h1>
            <p>This is a new entry </p>
            <p>This is a new entry</p>
    </div>

CSS:

.item p:first-child {background:red}

演示: http ://jsfiddle.net/tv90yrbz/

非常感谢您对此的任何帮助.

我需要将CSS应用于第一个和最后一个孩子.

这是我的代码:

<div class="parent">
    <div class="A B"><div class="xyz"></div></div>
    <div class="A B"><div class="xyz"></div></div>
    <div class="A B"><div class="xyz"></div></div>
</div>

.parent {
    display: inline-block;
    width: 100%;
}

.A {
    display: inline-block;
    max-width: 75%;
    position: relative;
    clear: both;
}

.B {
    float: left;
    padding: 10px;
}

我试图做如下:

.parent:first-child {
    margin-top: 15px;
}

.parent:last-child {
    margin-bottom: 2px;
}

因此,第一个孩子的上边距变为15px,所有孩子之间的差距变为4px;

但它不起作用.请帮我解决这个问题.