Question

我正在尝试将article.blogPosts:not(table.secondPost tr:last-child td:last-child) { background: linear-gradient(to right, red , blue); }的背景设置为指定渐变，但希望从此渐变颜色中排除第二个表的最后一行。我试过以下css但没有运气：

CSS

<article class = "blogPosts">

    <h2>Personal Programming Projects</h2>

    <section class= "blogPost">
        <table class= "firstPost">
          <tr>
            <th title = "20th October 2015">Blog post 2 - 20th October 2015 - <time datetime="2015-10-20 10:00">10:00</time>am</th>
            <th><input type="checkbox"> <label>Read</label></th>
          </tr>
          <tr>
            <td>
                <h3>Student Reporting System - Full Stack Developer</h3>
                <ul>
                  <li> Developed a student monitoring system to enable teachers to provide on-going reports on each student.</li>
                </ul>
            </td>       
          </tr>
        </table>
    </section>

    <section class= "blogPost">
        <table class="secondPost">
          <tr>
            <th title = "15th November 2015">Blog post 1 - 15th November 2015 - <time datetime="2015-10-20 10:00">10:00</time>am</th>
            <th><input type="checkbox"> <label>Read</label> </th>
          </tr>
          <tr>
            <td>
                <h3>Software Engineering Group Project - Lead Programmer</h3>
                <ul>
                  <li>Developed a fast food ordering system for our chosen business - Krusty's Pizza.</li>
                </ul>
            </td>       
          </tr>
          <tr>
            <td>
            </td>   
          </tr>
        </table>
    </section>

</article>

HTML

{{1}}

Answer 1

auto

请尝试这种风格。希望这会对你有所帮助。

Answer 2

选择器article.blogPosts设置整个文章元素的样式。使用:not()排除单个子元素将不起作用，因为它们不是具有渐变的元素。父母是。通过使用id选择它，为要从渐变中排除的行显式着色。

article.blogPosts {
  background: linear-gradient(to right, red, blue);
}
#lastRow {
  background: white;
}

<article class="blogPosts">

  <h2>Personal Programming Projects</h2>

  <section class="blogPost">
    <table class="firstPost">
      <tr>
        <th title="20th October 2015">Blog post 2 - 20th October 2015 -
          <time datetime="2015-10-20 10:00">10:00</time>am</th>
        <th>
          <input type="checkbox">
          <label>Read</label>
        </th>
      </tr>
      <tr>
        <td>
          <h3>Student Reporting System - Full Stack Developer</h3>
          <ul>
            <li>Developed a student monitoring system to enable teachers to provide on-going reports on each student.</li>
          </ul>
        </td>
      </tr>
    </table>
  </section>

  <section class="blogPost">
    <table class="secondPost">
      <tr>
        <th title="15th November 2015">Blog post 1 - 15th November 2015 -
          <time datetime="2015-10-20 10:00">10:00</time>am</th>
        <th>
          <input type="checkbox">
          <label>Read</label>
        </th>
      </tr>
      <tr id="lastRow">
        <td>
          <h3>Software Engineering Group Project - Lead Programmer</h3>
          <ul>
            <li>Developed a fast food ordering system for our chosen business - Krusty's Pizza.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td>
        </td>
      </tr>
    </table>
  </section>

</article>

Answer 3

您无法取消父母background-color。

试试这个

h2,
.firstPost tr,
.secondPost tr:not(:last-child) {
  background: linear-gradient(to right, red , blue);
}




.blogPosts {
  background-color: green;
}

h2 {
  margin-bottom: 0;
}

table {
  width: 100%;
}

<article class="blogPosts">

  <h2>Personal Programming Projects</h2>

  <section class="blogPost">
    <table class="firstPost">
      <tr>
        <th title="20th October 2015">Blog post 2 - 20th October 2015 -
          <time datetime="2015-10-20 10:00">10:00</time>am</th>
        <th>
          <input type="checkbox">
          <label>Read</label>
        </th>
      </tr>
      <tr>
        <td colspan="2">
          <h3>Student Reporting System - Full Stack Developer</h3>
          <ul>
            <li>Developed a student monitoring system to enable teachers to provide on-going reports on each student.</li>
          </ul>
        </td>
      </tr>
    </table>
  </section>

  <section class="blogPost">
    <table class="secondPost">
      <tr>
        <th title="15th November 2015">Blog post 1 - 15th November 2015 -
          <time datetime="2015-10-20 10:00">10:00</time>am</th>
        <th>
          <input type="checkbox">
          <label>Read</label>
        </th>
      </tr>
      <tr id="lastRow">
        <td colspan="2">
          <h3>Software Engineering Group Project - Lead Programmer</h3>
          <ul>
            <li>Developed a fast food ordering system for our chosen business - Krusty's Pizza.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          excluded
        </td>
      </tr>
    </table>
  </section>

</article>

无论如何，您是否故意省略了某些td元素或colspan属性？

排除css选择中的元素

3 个答案: