Css выбрать все, кроме первого тра не работает

Question

Вот скрипка:

https://jsfiddle.net/80mek2sL/1/

Я хочу, чтобы выбрать все, кроме первого tr и применять:

border-top: 1px grey solid; 

Тогда я хочу, чтобы выбрать все начальные td, но не первые td первых tr (= игнорировать первые tr) и применяются

border-right: 1px grey dotted; 

(я полностью не забочусь о совместимости с доисторическими веб-браузерами, я просто хочу, чтобы работать на в настоящее время веб-браузерах) То, что я не получаю (вот почему я потерял на самом деле), что непосредственный селектор table > tr не выберите tr (иначе я бы решил свою проблему)

Answer 1

Ваш селектор работает. Проблема в том, что у tr нет границы. Вы должны применять его в td внутри ...

#cheatsheet tr:not(:first-child) td { 
    border-top:1px grey solid; 
    background-color: #EF0; 
} 

Updated Fiddle

#cheatsheet td { 
 
    margin:2px; 
 
    padding:2px 
 
} 
 
#cheatsheet tr td:first-child { 
 
    padding-left:10%; 
 
    width:30%; 
 
} 
 
#cheatsheet thead { 
 
    background-color: #EFE; 
 
} 
 
#cheatsheet h3 { 
 
    text-align: center; 
 
} 
 
table#cheatsheet { 
 
    border:1px black solid; 
 
    margin:2px; padding:2px; 
 
    border-right:1px grey solid; 
 
    width:100%; 
 
} 
 
#cheatsheet tr:not(:first-child) td { 
 
    border-top:1px grey solid; 
 
    background-color: #EF0; 
 
}

<h1>Vim</h1> 
 

 
<table id="cheatsheet"> 
 
    <thead><tr> 
 
     <td colspan="2"><h3>aa</h3></td> 
 
    </tr></thead> 
 
    <tr> 
 
     <td><code class="prettyprint lang-sh">:split</code></td> 
 
     <td style="width:auto">bb</td> 
 
    </tr> 
 
    <tr> 
 
     <td><code class="prettyprint lang-sh">:vsplit</code></td> 
 
     <td style="width:auto">split vertical</td> 
 
    </tr> 
 
</table>

На другой ноте, причина table > tr не работает потому, что tr «s не являются непосредственный потомок table в визуализированном HTML. Если вы используете браузеры элементов инспектора вы увидите, что thead и tbody элементы вставляются автоматически для вас

---

EDIT После комментария ниже все, что вам нужно сделать, это ...

#cheatsheet tbody td { 
    border-top:1px grey solid; 
    background-color: #EF0; 
} 

то есть. целевой показатель в td в пределы только tbody,

Updated Fiddle

Answer 2

проверка скрипка: https://jsfiddle.net/80mek2sL/6/

nth-child(n+2) селектор позволяет выбрать любое количество детей. в следующем примере я выбираю строку из второго ребенка.

#cheatsheet tr:nth-child(n+2) td { 
    border-top:1px grey solid; 
    background-color: #EF0; 
} 

Вы также можете играть aorund (n + *) и проверить результат, чтобы лучше понять Селектор nth-child

Примечание: вы не можете положить границы собственность <tr> так что вам нужно будет назначить его <td>

HTML

<table id="cheatsheet"> 
    <thead> 
     <tr> 
      <td colspan="2"> 
       <h3>aa</h3> 
      </td> 
     </tr> 
    </thead> 
    <tr> 
     <td><code class="prettyprint lang-sh">:split</code> 
     </td> 
     <td style="width:auto">bb</td> 
    </tr> 
    <tr> 
     <td><code class="prettyprint lang-sh">:vsplit</code> 
     </td> 
     <td style="width:auto">split vertical</td> 
    </tr> 
    <tr> 
     <td><code class="prettyprint lang-sh">:vsplit</code> 
     </td> 
     <td style="width:auto">split vertical</td> 
    </tr> 
    <tr> 
     <td><code class="prettyprint lang-sh">:vsplit</code> 
     </td> 
     <td style="width:auto">split vertical</td> 
    </tr> 
</table> 

CSS

#cheatsheet td { 
    margin:2px; 
    padding:2px 
} 
#cheatsheet tr td:first-child { 
    padding-left:10%; 
    width:30%; 
} 
#cheatsheet thead { 
    background-color: #EFE; 
} 
#cheatsheet h3 { 
    text-align: center; 
} 
table#cheatsheet { 
    border:1px black solid; 
    margin:2px; 
    padding:2px; 
    border-right:1px grey solid; 
    width:100%; 
} 
#cheatsheet tr:nth-child(n+2) td { 
    border-top:1px grey solid; 
    background-color: #EF0; 
}