Column combinator

草案
本页尚未完工.

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

通过列合并符 (||)链接两个元素时, 它只会匹配被第二个CSS选择器匹配的元素,且此元素属于被第一个CSS选择器匹配的列元素.

/* 属于"被选择"列的表单元格 */
col.selected || td {
  background: gray;
}

语法

column-selector || cell-selector {
  /* style properties */
}

示例

HTML

<table border="1">
  <colgroup>
    <col span="2"/>
    <col class="selected"/>
  </colgroup>
  <tbody>
    <tr>
      <td>A
      <td>B
      <td>C
    </tr>
    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>

CSS

col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

结果

规范

规范 状态 评论补充
Selectors Level 4
column combinator
Working Draft 最初的定义.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Column combinator (A || B)
Experimental
Chrome No support NoEdge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1605558.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

相关