仅将 CSS 应用于一个网格答案

【问题标题】：Apply css to just one grid仅将 CSS 应用于一个网格
【发布时间】：2018-06-27 08:18:26
【问题描述】：

我正在使用 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 应用到一个或两个网格而不是所有网格？

【问题讨论】：

向您要更改的网格添加一个类？请分享 html 以获得更好的帮助。

标签： css jqgrid

【解决方案1】：

选择器

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

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

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

查看jqGrid div和表格的结构here。

【讨论】：

【解决方案2】：

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

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

所以你的代码是：

#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;
}

【讨论】：