使用 jQuery 覆盖 nth-child 伪类

Posted 2023-03-05

【中文标题】使用 jQuery 覆盖 nth-child 伪类

【英文标题】：Overing nth-child pseudo classes with jQuery

【发布时间】：2018-11-05 04:10:36

【问题描述】：

我建立了一个表格，并使用 css 伪类为偶数和奇数行添加了一些阴影。

table tr:nth-child(odd) td 
  background-color: #fff;


table tr:nth-child(even) td 
  background-color: #F8F8F8;


.tableRow_selected 
        background-color: blue !important;
        font-weight: bold;
 

I have a third class that I want to implement when a <tr> element is selected it changes the background color of the whole row to blue.

  var $tr = $('tbody tr').click(function() 
      $tr.removeClass('tableRow_selected');
      console.log(this);
      $(this).addClass('tableRow_selected');
  );

我的问题是 .tableRow_selected 会给该行一个粗体打印，但不会更改背景颜色，因为第 n 个孩子会覆盖它。如何实现我想要的效果？

编辑：添加 EJS 代码

  <tbody class="scroll" id="upcoming__body">
    <% data.forEach((record, index) =>  %>
    <tr>
      <td><%=record.start%>
          <!-- <span style="display: block;font-size:10pt;"><%=record.time%></span> -->
          <% if(page_name === '/course-record')  %>
          <p class="timer" style="font-size: 8pt; color: red; font-weight:bold;"></p>
          <%  else  %>
          <p style="font-size: 8pt; color: red; font-weight:bold;">Class Complete</p>
          <%  %>
      </td>
      <% if(page_name === '/course-record') %>
      <td>
        <a href='/teaching'><input type="image" class="web_camera" src="/img/camera.png" disabled></a>
        <div class="join_class">

        </div>
      </td>
      <%  %>
      <td>
        <div class="row d-flex justify-content-center">
          <div class="col-3-sm">
            <a style="color:black;" href='/course-description'><%=record.courseName%></a>
            <span style="display:block; font-size:10pt;"><%=record.title%></span>
          </div>
          <div class="col-3-sm d-flex align-items-center">
            <img class="ml-2" src="<%=(record.type == 'I' ? '/img/course-record/I.png' : '/img/course-record/G.png') %>"
                 >
          </div>
        </div>

      </td>
      <td style="padding-top: 20px;">
        <div class="row d-flex justify-content-center">
          <% Object.getOwnPropertyNames(record.students).forEach((k) =>  %>
          <div class="col-3-sm ml-1 mr-1">
            <figure>
              <a href='/student_profile'><img src="<%=record.students[k].studentThumbnail%>"></a>
              <figcaption><b><%=record.students[k].studentId%></b></figcaption>
            </figure>
          </div>
          <% ) %>
        </div>
      </td>

      <td>
          <% if(index == 0)  %>
          <span style="color:#1A9AB3;font-size: 6pt;">Received</span>
          <%  %>
          <span style="display:block; font-size: 16pt; color:green;">$<%=record.moneyReceived%></span>
      </td>

      <td>
        <% if(index == 0)  %>
        <!-- <div>
          <p style="display:inline;padding: 10px 10px color:#1A9AB3;font-size: 6pt;">Message</p>
          <p style="display:inline;padding: 10px 10px color:#1A9AB3;font-size: 6pt;">Create Quiz</p>
          <p style="display:inline;padding: 10px 10px color:#1A9AB3;font-size: 6pt;">Change Course</p>
        </div> -->
        <%  %>
        <button data-toggle="modal" data-target="#MessageModal" rel="tooltip" data-placement="top" title="Send Message" class="record_icons"><img src="/img/message.png"></img></button>
        <a href = '/create_quiz 'rel="tooltip" data-placement="top" title="Create Quiz" class="record_icons"><img src="/img/plus-course-record.png"></img></a>
        <!-- <a href='/student_grading' rel="tooltip" data-placement="top" title="Grading & Feedback"  class="record_icons"><img src="/img/nike.png"></img></a> -->
        <button data-toggle="modal" data-target="#ChangeModal" rel="tooltip" data-placement="top" title="Change Course" class="record_icons"><img src="/img/change.png"></img></button>
        <!-- <button data-toggle="modal" data-target="#CancelModal" rel="tooltip" data-placement="top" title="Cancel Course" class="record_icons"><img src="/img/x.png"></img></button> -->
      </td>
    </tr>

【问题讨论】：

粘贴你的html代码，

用模板代码更新了问题。忽略所有ejs语法

color() 函数和变量从何而来？它不是 CSS 的一部分（据我所知），并且鉴于您已应用 !important，它应该覆盖任何其他 CSS 选择器，无论具体如何。

哦，我是从我为组织颜色而制作的彩色地图中道歉的。我会在编辑中将其更改为其他内容

【参考方案1】：

你的问题是td有背景色，所以你需要改变它：

tr.tableRow_selected td 
  background-color: #666666;

但是，您还需要担心CSS Specificity，所以上面的内容不起作用，您需要使其更具体

table tr.tableRow_selected td 
  background-color: #666666;

var $tr = $('tbody tr').click(function() 
  $tr.removeClass('tableRow_selected');
  console.log(this);
  $(this).addClass('tableRow_selected');
);

table tr:nth-child(odd) td 
  background-color: #fff;


table tr:nth-child(even) td 
  background-color: #F8F8F8;


tr.tableRow_selected 
  font-weight: bold;

table tr.tableRow_selected td 
  background-color: #666666;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

【讨论】：

谢谢。以后我会牢记 CSS 的特殊性