CSS 在内部 table 使用 :not() 选择器

Question

我正在使用 AjaxControlToolkit，主页 CSS 也影响内部 "calendar" 弹出窗口。

我已将所有内容简化为一个简单的 1 页示例，展示了我想要的、我尝试过的以及 "ugly workaround"。我正在寻找合适的 CSS 解决方案。

所有信息都在下面的例子中：

table.my_table_padding {border-collapse: collapse;}

/* starting point (looks a mess) */
/* table.my_table_padding tr td {padding: 20px;background-color: greenyellow;} */

/* My attempts (neither worked) */ 
/* :not(.ajax_calendar) table.my_table_padding tr td {padding: 20px;background-color: orange;} */ 
/* :not(div.ajax_calendar) table.my_table_padding tr td {padding: 20px;background-color: orange;} */ 

/* The workaround that is a mess and a horrid bodge - is there a better way in a single class, using a :not() ? */
table.my_table_padding tr td {padding: 20px;background-color: greenyellow;}
div.ajax__calendar table.my_table_padding tr td {padding: 0;background-color: white;}

<table border="1" class="my_table_padding">
  <tr>
    <td>Header-text</td>
    <td>Sample Text... Sample Text...<br />Text is here</td>
  </tr>
  <tr>
    <td>Header-text</td>
    <td>
      <div class="ajax__calendar">
        <!-- Actually using a popup nuget:AjaxControlToolkit, this is an example -->
        See: <a href="https://ajaxcontroltoolkit.devexpress.com/Calendar/Calendar.aspx">AjaxControlToolkit Sample Page</a>
        <table border="1" class="my_table_padding">
          <tr><td colspan="7">Popup calendar-control</td></tr>
          <tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
          <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
          <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
        </table>
      </div>
    </td>
  </tr>
</table>

编辑 1（澄清我的目的）

基本上，我找到了一种丑陋的方式来实现所需的显示效果 1 - 添加原始 CSS-规则 [table.my_table_padding tr td] 2 - 在其下方添加另一个 CSS-规则 [div.ajax__calendar table.my_table_padding tr td] 与第一条规则

中的所有更改具有相反的效果

但是，这种方法看起来很乱。我想知道是否有更好的措辞方式（CSS 规则 1），它选择了除 "div class=ajax__calendar" 元素的子元素之外的所有表。

编辑 2 - 原始 ASP.NET Webforms 代码

<asp:DetailsView runat="server" ID="detv_Main" CssClass="my_table_padding detv_example">
 <Fields>
  <asp:TemplateField HeaderText="Start Date" SortExpression="EventStartDate">
   <EditItemTemplate>
     <asp:TextBox ID="txt_EventStartDate" runat="server" Text='<%# Bind(example) %>' CssClass="edit_background"></asp:TextBox>
     <ajaxToolkit:CalendarExtender ID="calext_EventStartDate" TargetControlID="txt_EventStartDate" runat="server" Format="d MMM yyyy" />
  </EditItemTemplate>
  <ItemTemplate>Example date</ItemTemplate>
</asp:TemplateField>

Answer 1

至于使 CSS 仅适用于父级 table，除了 [=14] 之外，您还需要使用 child combinator (>) =].没有子组合器，内部 table 仍然匹配规则，因为内部 table 的后代（被 :not 排除）也是外部 table 的后代（这不被 :not 排除）。

使用带有 table 和 tr you have to include the implicit tbody 的子组合器。您的选择器的最终结果是：

:not(.ajax__calendar) table.my_table_padding > tbody > tr > td

这将帮助您完成大部分工作。但是，，因此您的内部 table 将与外部 table 具有相同的背景，除非中间设置了它。我选择直接在 .ajax__calendar 上设置它，但您可以选择将它放在外部 td 的任何后代上（设置背景颜色的地方）。

table.my_table_padding {border-collapse: collapse;}

:not(.ajax__calendar) > table.my_table_padding > tbody > tr > td {padding: 20px;background-color: greenyellow;}

/* This is necessary since the transparent background of the inner table would otherwise should the greenyellow of the outer table. This could be set at a different level as desired */
div.ajax__calendar {background-color: white;}

<table border="1" class="my_table_padding">
  <tr>
    <td>Header-text</td>
    <td>Sample Text... Sample Text...<br />Text is here</td>
  </tr>
  <tr>
    <td>Header-text</td>
    <td>
      <div class="ajax__calendar">
        <!-- Actually using a popup nuget:AjaxControlToolkit, this is an example -->
        See: <a href="https://ajaxcontroltoolkit.devexpress.com/Calendar/Calendar.aspx">AjaxControlToolkit Sample Page</a>
        <table border="1" class="my_table_padding">
          <tr><td colspan="7">Popup calendar-control</td></tr>
          <tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
          <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
          <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
        </table>
      </div>
    </td>
  </tr>
</table>

CSS 在内部 table 使用 :not() 选择器

CSS use of :not() selector on an inner table

css

ajaxcontroltoolkit

css-selectors