：n-child不起作用

时间：2017-02-01 23:26:29

标签： html css css-selectors

这是ajax加载帖子的wordpress插件的html 

<div class="row newsrow">
  <div>
    <div id="ajax-load-more" class="ajax-load-more-wrap alm-0" data-alm-id="0" data-canonical-url="http://bayron.nl/" data-slug="home">
      <ul class="alm-listing alm-ajax  " data-repeater="default" data-post-type="post" data-post-format="" data-category="" data-category-not-in="" data-tag="" data-tag-not-in="" data-taxonomy="" data-taxonomy-terms="" data-taxonomy-operator="" data-taxonomy-relation=""
        data-meta-key="" data-meta-value="" data-meta-compare="" data-meta-relation="" data-meta-type="" data-year="" data-month="" data-day="" data-author="" data-post-in="" data-post-not-in="" data-exclude="" data-search="" data-custom-args="" data-post-status=""
        data-order="DESC" data-orderby="date" data-offset="0" data-posts-per-page="3" data-lang="" data-scroll="false" data-scroll-distance="150" data-max-pages="0" data-pause-override="false" data-pause="false" data-button-label="Older Posts" data-button-class=""
        data-destroy-after="" data-transition="fade" data-images-loaded="true">
        <div class="alm-reveal">
          <li>
            <div class="list-content">
              <img width="360" height="240" src="http://bayron.nl/wp-content/uploads/2017/01/helsinki.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://bayron.nl/wp-content/uploads/2017/01/helsinki.jpg 360w, http://bayron.nl/wp-content/uploads/2017/01/helsinki-300x200.jpg 300w"
                sizes="(max-width: 360px) 100vw, 360px">
              <h3><a href="http://bayron.nl/2017/01/27/future-digital-finance-forum/" title="FUTURE DIGITAL FINANCE FORUM">FUTURE DIGITAL FINANCE FORUM</a></h3>
              <p>April 2017 | Helsinki | Keynote Speaker</p>
              <p>Future Digital Finance Forum gathers the pioneers and decision makers to discuss the opportunities and challenges caused by digitalization and disruption in the industry.</p>
            </div>
          </li>
          <li>
            <div class="list-content">
              <img width="384" height="240" src="http://bayron.nl/wp-content/uploads/2017/01/wroclaw.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://bayron.nl/wp-content/uploads/2017/01/wroclaw.jpg 384w, http://bayron.nl/wp-content/uploads/2017/01/wroclaw-300x188.jpg 300w"
                sizes="(max-width: 384px) 100vw, 384px">
              <h3><a href="http://bayron.nl/2017/01/27/impactcee-2016-fintechinsurtech/" title="IMPACTCEE 2016  FINTECH/INSURTECH">IMPACTCEE 2016  FINTECH/INSURTECH</a></h3>
              <p>December 2016 | Wroclaw | Keynote Speaker</p>
              <p>This is the most content driven fintech congress in the Central Eastern Europe gathering the top industry innovators.</p>
            </div>
          </li>
          <li>
            <div class="list-content">
              <img width="360" height="191" src="http://bayron.nl/wp-content/uploads/2017/01/classof17.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://bayron.nl/wp-content/uploads/2017/01/classof17.jpg 360w, http://bayron.nl/wp-content/uploads/2017/01/classof17-300x159.jpg 300w"
                sizes="(max-width: 360px) 100vw, 360px">
              <h3><a href="http://bayron.nl/2017/01/27/meet-the-11-startup-teams-from-our-fintech-cybersecurity-2017-class/" title="MEET THE 11 STARTUP TEAMS FROM OUR FINTECH &amp; CYBERSECURITY 2017 CLASS!">MEET THE 11 STARTUP TEAMS FROM OUR FINTECH &amp; CYBERSECURITY 2017 CLASS!</a></h3>
              <p>November 2016 | Startup Bootcamp</p>
              <p>On the 22-23 of November, Selection Days for our FinTech &amp; CyberSecurity program took place. The event was very special: not only it was selecting the first cohort for our recently announced FinTech &amp; CyberSecurity program but also
                celebrating the 100th startup selected for the programs in Amsterdam.<br> The event truly was a celebration of entrepreneurship, empowerment, ecosystem and innovation. <a href="https://youtu.be/uPsCgRjL6bc" target="_blank">Watch the aftermovie to feel the energy.</a></p>
              <p>&nbsp;</p>
            </div>
          </li>
        </div>
      </ul>
      <div class="alm-btn-wrap"><button id="load-more" class="alm-load-more-btn more">Older Posts</button></div>
    </div>
  </div>
</div>

这很多但我想展示它，因为我不知道问题出在哪里。我将尝试解释我在HTML中使用的类的位置

这是我在项目中使用的唯一的2个孩子，他们不起作用。

.alm-listing > li:nth-child(4) {
    padding: 0 10px;
    margin-top: 5%
}

.alm-listing > li:nth-child(3) {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    color: #fff
}

.alm-listing的类从第4个HTML元素开始;无序列表 那么css应该选择该UL中的列表元素。在那些列表元素中，第3个和第4个元素（两个不同的段落）应该被nth-childs选中。不要担心列表内容类的div，我已经尝试将其删除但css仍然无效。

如果有人可以帮助我，我会非常感激！

2 个答案:

答案 0 :(得分：0)

我认为您的问题是，您试图直接在<li>内<ul>设置alm-listing > li的样式<li>，但您有.alm-listing > div > li:nth-child(4) { padding: 0 10px; margin-top: 5% } .alm-listing > div > li:nth-child(3) { position: absolute; top: 20%; left: 0; right: 0; color: #fff } }标签在另一个div内。

improper nesting

试试这个

// Upload a file to an HTTP server.
pplx::task<void> UploadFileToHttpServerAsync()
{
    using concurrency::streams::file_stream;
    using concurrency::streams::basic_istream;

    // To run this example, you must have a file named out.txt in the current folder.

    // Open stream to file.
    wstring filePath = L"out.txt";
    return file_stream<unsigned char>::open_istream(L"filePath").then([](pplx::task<basic_istream<unsigned char>> previousTask)
    {
        try
        {
            auto fileStream = previousTask.get();
            http_client client(L"http://localhost:80");
            return client.request(methods::PUT, L"filePath", fileStream).then([fileStream](pplx::task<http_response> previousTask)
            {
                fileStream.close();

                std::wostringstream ss;
                try
                {
                    auto response = previousTask.get();
                    ss << L"Server returned returned status code " << response.status_code() << L"." << std::endl;
                }
                catch (const http_exception& e)
                {
                    ss << e.what() << std::endl;
                }
                std::wcout << ss.str();
            });
        }
        catch (const std::system_error& e)
        {
            std::wostringstream ss;
            ss << e.what() << std::endl;
            std::wcout << ss.str();

            // Return an empty task.
            return pplx::task_from_result();
        }
    });

答案 1 :(得分：0)

对，所以我觉得我发现了问题。它不是CSS。我取消了我的CSS，以便我可以更轻松地安排一些媒体查询。在unminify之后是问题开始的时候。我从2天前找到了我的CSS（缩小版）的备份。当我将缩小版本上传到我的网站时，nth-childs就像他们应该的那样工作。我将缩小后的备份解压缩并将其上传到我的网站，瞧，我的代码停止了工作...我无法相信这甚至是一件事。对于想知道我曾经在哪些网站进行统一的人，他们在这里; unminify.com和codepen.com的编辑器（整洁的CSS）。

Welp我想我必须重新开始; /

相关问题
最新问题