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选择器中的“Name”字，这不是我打算做的。

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

Answer 1

否定伪类，不是（X），是一个功能符号   简单的选择器（不包括否定伪类本身）作为   论点。它表示一个未由其表示的元素   参数。

一个简单的选择器是一个类型选择器，通用选择器，   属性选择器，类选择器，ID选择器或伪类。

从上面的语句中可以看出：not（）只接受一个简单的选择器作为参数，而伪元素不属于简单的选择器类别。因此，不，你无法按照自己的方式实现目标。

实现您尝试执行的操作的一种方法是覆盖该属性，例如，当您不想显示该属性时将其设置为font-size:0px;。

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

另一种方法可能是使用scss（SASS）。

希望它有所帮助！

CSS：不适用于响应表中选择器之前的特定td

1 个答案: