css样式查找遇到的问题汇总

利用css简单排除元素的第一个子元素

　　　　例如：排除表格的第一行

　　　　/*除了表格的第一行其他都显示为红色*/

table tr+tr{
    background-color:red;/*除了表格的第一行其他都显示为红色*/
}

排除最后一行

table tr:not(:last-child){
    background-color:red;/*除了表格的最后一行其他都显示为红色*/
}

2.表示匹配class为row下面的有class以“col-”字段开头的所有div

.row div[class^='col-']{
　　height:99.9%;
}

延伸排除第三个div

  <style>
    div{200px;height:200px;text-align:center;line-height:200px;font-size:18px}
    div[id*=button]{background-color:pink}
  </style>
  <body>
        <div id="button_1">第一个div</div>
        <div id="button_2">第二个div</div>
        <div id="bun_1">第三个div</div>

  </body>

3.匹配button里面name="sub"

button[name=sub]{background-color:pink}

<button name="sub"></button>
<button name="add"></button>
<button name="sub"></button>
<button name="add"></button>

4.匹配 table里面包含th的tr

$("#tbl>tr:has(th)") //查找第一个tr

    <table id="tbl">
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

not class的方法匹配到第一个tr

$("#tbl tr:not([class])")

    <table id="tbl">
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr class="132456">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="34356">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>