23

テーブルのCSSで省略記号クラスを適用しようとしています。したがって、この省略記号クラスが必要な列がいくつかあります。テーブルに複数の列があります。

私はnth-childcssのプロパティでこれを行っています.ランダムな複数の子を選択する別の方法はありますか?

私は試した-

.ListTaskTime tbody tr >td:nth-child(3) a
{
      text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

同じテーブルにはもう1つの列がありますが5th-child、この子のために別のクラスを作成する必要があるため、他の列のために.

CSS コードを拡張したくありません。他の解決策はありますか？

4

5 に答える 5

40

クラスはコンマで区切ることができます,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

注:nth-child列が増えると CSS が判断できないため、スタイルシートで確認して手動で定義する必要があります。

動的テーブルの生成にサーバー側言語を使用している場合はsubstr()、文字を切り詰めるなどの関数を使用できます。

補足：>子テーブルがない場合を除き、使用する必要はありません。これで十分です..tbody tr td:nth-child(3)

于 2013-05-04T07:31:45.277 に答える
6

これはそれを行う必要があります：

.ListTaskTime tbody tr > td:nth-child(3) a,
.ListTaskTime tbody tr > td:nth-child(5) a
{
    text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

このようにセレクターの間にコンマを使用すると、宣言された同じスタイリングを使用する複数のセレクターを使用できます。より多くの要素が同じスタイルを使用できるようにするために、コンマ区切りのセレクターをいくつでも持つことができます。

ページ上で競合するスタイルがない限り、 using.ListTaskTime tbody tr > td:nth-child(3) aは非常に具体的であり、.ListTaskTime td:nth-child(3) a.

スタイルを設定するパターンに適合する列が後ほどある場合に役立つ、さらに複雑な疑似セレクターについても知りたいと思うかも:nth-child(even)しれません。:nth-child(odd)nth-child:nth-child(2n+3)

于 2013-05-04T07:31:31.837 に答える
1

「クラスを選択してクラスを適用する」とはどういう意味かよくわかりませんが、基本的にcssセレクター文字列が必要だと思います。

その 5 番目の子列 (?) が別のクラスを必要とする場合、他のすべての子を意味しますが、テーブル内のその子にはプロパティがありますtext-overflow: ellipsis。これは短い代替方法です。

    .ListTaskTime td:not(:nth-of-type(5)) a{
        /*styles for ellipse goes here*/}
    .ListTaskTime td:nth-of-type(5) a{ 
        /*styles for not-ellipse goes here*/}

(奇妙なことに、クラス化されたオブジェクトが の場合<p>、その特定のセレクター文字列は動作しますが、動作しません<div>..)

を使用tr>:nth-child()して、同じスペースを共有するすべてのオブジェクトをターゲットにすることもできます<td>。他のすべての細かい部分 (複数のクエリなど) は、他の人によってきちんと概説されています。申し訳ありませんが、テーブルに 2 つの異なる形式がある場合、単純な css の単一のセレクターで両方を指定することはほとんど不可能です..今のところ? ;)

于 2014-08-26T06:36:26.687 に答える