css 没有定位内容或定位错误的内容答案

【问题标题】：css not targeting content or targeting wrong contentcss 没有定位内容或定位错误的内容
【发布时间】：2017-08-12 13:31:57
【问题描述】：

我在这里有一个项目，其中一个菜单加载了 ajax 各个部分。在我的“联系人”部分，我有这个 html 文件：

<!DOCTYPE html>
<html lang="en-US">

  <head>

    <meta charset="UTF-8">
    <title>Photography</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" />

  </head>

  <body>

    <section id="content">

    <div id="container">

      <div id="contact" class="sections">
        <div id="artpurchases">
          <p><span>Art purchases :</span>Galerie Hélène Nougaro</br>
          <a href="mailto:helnougaro@gmail.com">helnougaro@gmail.com</p></a>
        </div>
        <div id="otherenquiries">
          <p><span>Other enquiries :</span></br>
          <a href="mailto:cavapaslatet@gmail.com">cavapaslatet@gmail.com</p></a>
        </div>
      </div>

    </div> <!-- end of content -->

    </section> <!-- end of container -->

  </body>

整个网站的段落样式大致如下：

p {
    color: #818181;
    font-family: Eagle-Light;
    line-height: 1.7em;
    padding: 0px;
    margin: 0px;
    font-size: 0.5em;
    letter-spacing: 0.21em;}

在我的联系人部分，我有这样的样式：

#contact {
    position: relative;}


#contact.sections p {
    margin-bottom: 0;

    display: block;
    text-align: center;}


#contact a {
      color: inherit;
      text-decoration: inherit;
}

看起来像这样：

我正在尝试一些简单的方法，以便在“其他查询”行之前获得更多边距。

当我尝试像这样定位我的第二段时：

#contact.sections p:nth-child(2) {
    margin-top: 2em;
}

什么都没有发生。我试着调查了一下，这个：

#contact.sections p:nth-child(1) {
    color: red;
}

会返回这个意想不到的结果：

这里到底发生了什么？我的 html 显然是用两个 p 标签组织的，它们不是 css 所针对的。这是一个CSS错误吗？谢谢

编辑------------------------------ --------------------------

html 更新：

 <div id="contact" class="sections">

          <p><span>Art purchases :</span>Galerie Hélène Nougaro<br>
          <a href="mailto:helnougaro@gmail.com">helnougaro@gmail.com</a></p>

          <p><span>Other enquiries :</span><br>
          <a href="mailto:cavapaslatet@gmail.com">cavapaslatet@gmail.com</a></p>

      </div>

【问题讨论】：

顺便说一句，您的</br>s 应该是<br /> 或<br>
您的</a>s 也应该在</p>s 内
:nth-child 以公共父元素的子元素为目标。您的 p 元素没有共同的父元素。

标签： html css css-selectors margin children

【解决方案1】：

试试这个，因为你的目标是错误的。

#contact.sections div:nth-child(2) p {
    margin-top: 2em;
}

这对您不起作用的原因是您的 HTML 错误。我已经更正了 HTML：

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="UTF-8">
    <title>Photography</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" />

  </head>

  <body>

    <section id="content">

    <div id="container">

      <div id="contact" class="sections">
        <div id="artpurchases">
          <p><span>Art purchases :</span><br>Galerie Hélène Nougaro<br>
          <a href="mailto:helnougaro@gmail.com">helnougaro@gmail.com</a></p>
        </div>
        <div id="otherenquiries">
          <p><span>Other enquiries :</span><br>
          <a href="mailto:cavapaslatet@gmail.com">cavapaslatet@gmail.com</a></p>
        </div>
      </div>

    </div> <!-- end of content -->

    </section> <!-- end of container -->

  </body>

</html>

JSFiddle

【讨论】：

您好，感谢您的贡献。这也不起作用。它不针对任何目标，当我将孩子更改为 (1) 时，它针对所有目标。
@Paul 我忘了#contact.sections 和:nth-child(2) 之间的div
再次感谢。这也不起作用。无论孩子如何，它都没有任何目标
我会调查一下，请稍等
@Paul Works for me 可能是您的 HTML 错误。

【解决方案2】：

只需使用此选择器来定位该行

#otherenquiries p {
  margin-top: 2em;
}

（使用您的原始 HTML，即）

甚至是简单的

#otherenquiries {
  margin-top: 2em;
}

【讨论】：