html - CSS :not for a specific td with :before selector in responsive table

Question

我制作了一个响应式 css 表格，如果我点击 <tr>我在隐藏行中得到一个输出。当然，当我将窗口大小调整为手机显示大小时 :before选择器将显示我不想发生的该行的内容。让我向您展示代码。

$(function(){
  $('.record td').on('click', function(){
    $(this).parent('.record').next('.companion').toggle();
    var msgid = $(this).parent('.record').attr("id");
    var dataString13 = 'msgid=' + msgid;
    $.ajax({
      type: "POST",
      url: "view_msg.php",
      data: dataString13,
      cache: false,
      success: function(data){
        if (data == 0) {
          alert('Not Sent!');
        } else {
          //$('a#'+msgid).html(data);
          //$('.viewmessage'+msgid).hide();
          //$('a#'+msgid).html('<img src="img/loader.gif" class="loading" />'); 
          $('#corpmesaj').html('<img src="img/loader.gif" class="loading" />'); 
          $('#corpmesaj').html(data); 
          $('.o'+msgid).html(data);
          // $(this).parent('.record').next('.companion').html(data);
          //$(this).parent('.record').addClass('recorded');
          //$(this).parent('.record').removeClass('record');
        }
      }
    });
    return false;
  });
});

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
    width: 100%; 
    border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
    background: #eee; 
}
th { 
    background: #333; 
    color: white; 
    font-weight: bold; 
}
td, th { 
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 
}
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr { border: 1px solid #ccc; }
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
    /* Label the data */
    td:nth-of-type(1):before { content: "Name"; }
    td:nth-of-type(2):before { content: "Subject"; }
    td:nth-of-type(3):before { content: "Date"; }
    td:nth-of-type(4):before { content: "Actions"; }
}

<table class="rules">
    <thead>
      <tr>
        <th>Name</th>
        <th>Subject</th>
        <th>Date</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="record">

        <td class="overflow">
           <div class="toggle enabled"></div>  John Doe
        </td>
        <td class="overflow" title="Sunshine Northwind Systems, Incorporate (Really Long Company Name): Note the elipsis">
          Sunshine Westwind Systems, Incorporate
        </td>
        <td class="date">
          2013/12/13
        </td>
        <td class="last">
          <a href="#"><img class="filter" src="a.jpg" width="26" /></a>
        </td>
      </tr>
      <tr class="companion">
        <td class="output" colspan="4">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra nunc sit amet arcu dignissim, vestibulum pharetra turpis bibendum. Donec nisi felis, elementum ut lectus vitae, sagittis condimentum sem. Praesent at sapien turpis. Maecenas feugiat feugiat est, vel hendrerit elit congue vitae. Fusce quis velit sed urna ultricies molestie quis non neque. Vestibulum ultrices quam et enim fringilla tempus. Cras ornare magna eu pellentesque elementum. Duis vel magna eget lacus imperdiet consequat. Mauris cursus porttitor vulputate. Ut egestas diam vitae massa tincidunt, et tempus dui laoreet. Praesent consequat turpis ac ante pretium, id auctor ante aliquet.
          </p>
        </td>
      </tr>
      
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4"></td>
      </tr>
    </tfoot>
</table>

如您所见<td class="output">将填充我的 javascript 输出和 css 选择器的“名称”字，这不是我打算做的。

编辑:我上传了一张图片来向您展示问题:

Answer 1

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

从上面的语句可以看出，:not() 只接受一个简单选择器作为参数，伪元素不属于简单选择器类别。因此，不，您无法以您正在尝试的方式实现您正在尝试的目标。

实现您想要做的事情的一种方法是覆盖该属性，例如，当您不想显示它时，将其设置为 font-size:0px;。

或者使用 jquery $('selector').removeClass('classToRemove'); 删除属性;在这种情况下，您必须将所需的仅移动或仅 pc 样式放在该类上，以便在需要时删除(或添加)。

另一种方法是使用 scss (SASS)。

希望对您有所帮助!