仅将 css 应用于一个网格

Question

我正在使用 jqgrid 4.5.4。

我正在尝试使用此选择器

应用一些 css

.ui-jqgrid tr.jqgrow td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
}

但是因为我有多个网格，我只想将这个 css 应用到一个网格，所以我尝试了这种方式：

#grid .ui-jqgrid tr.jqgrow td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
}

但没有成功。

有没有办法将此 css 应用于一个或两个网格而不是所有网格？

Answer 1

有根据的猜测：您的目标网格是 id="grid" 和 class="ui-jqgrid"。然后，您的 CSS 应该定位 #grid.ui-jqgrid tr.jqgrow td（#grid 和 .ui-jqgrid 之间没有 space）。

目前它的目标是 .ui-jqgrid，这将是 #grid 的 child 而不是元素。

因此您的代码将是：

#grid.ui-jqgrid tr.jqgrow td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
}

Answer 2

选择器

#grid .ui-jqgrid tr.jqgrow td {...}

是错误的，因为 .ui-jqgrid 是 outer div 相对于网格。正确的至少是以下内容：

.ui-jqgrid #grid tr.jqgrow td {...}

查看 jqGrid div 和表的结构 here。

仅将 css 应用于一个网格

Apply css to just one grid

css

jqgrid