2

私は自分のCSSクラスを定義しました：

.my-ui-table td {
border-width: 1px;
border: 0;
padding: 5px 10px;
border-style: hidden;
border-color: inherit;
}

デフォルトのPrimeFacescssは、適用される独自のクラスを定義します。

.ui-panelgrid td {
border-width: 1px;
border-style: solid;
border-color: inherit;
padding: 4px 10px;
}

両方のクラスがテーブルに適用されています：

<table class="ui-panelgrid ui-widget my-ui-table" role="grid">...</table>

Chromeが上記のテーブルをレンダリングすると、ui-panelgridクラスのborder-styleがmy-ui-tableクラスで定義されたborder-styleよりも優先されます。私はCSSの特異性について読んでいますが、特異性のように見える方法は両方のクラス定義で同じであるため、class=""属性で最後に指定されたものが優先されます。なぜこれが起こらないのですか？

編集：HTMLヘッドタグ：

<head>
 <link type="text/css" rel="stylesheet" href="/webapp/do/javax.faces.resource/my.css?ln=css">
 <link type="text/css" rel="stylesheet" href="/webapp/do/javax.faces.resource/primefaces.css?ln=primefaces">
</head>

。

4

1 に答える 1

6

重要なのは、class = "..."の順序で最初に来るものではなく、cssルールの最後に書かれているものです。そのため、カスケードスタイルシートと呼ばれる、同等以上の特異性を持つ最後の関連ルールが適用されます。したがって、すべてのルールが外部シートにあり、それらが同等の特異性を持っている場合、最後のルールが適用されます。ただし、インライン/内部スタイルは外部スタイルよりも優先されます。（これはあなたがそれらを使うべきだという意味ではありませんが）

于 2013-02-15T17:19:33.563 に答える