initial commit

1 files changed, 99 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/column_combinator/index.html b/files/zh-cn/web/css/column_combinator/index.html
new file mode 100644
index 0000000000..1f665103f0
--- /dev/null
+++ b/files/zh-cn/web/css/column_combinator/index.html
@@ -0,0 +1,99 @@
+---
+title: Column combinator
+slug: Web/CSS/Column_combinator
+tags:
+  - CSS
+  - 参考
+  - 合并器
+  - 表格
+  - 试验
+  - 选择器
+  - 需要浏览器的兼容性
+translation_of: Web/CSS/Column_combinator
+---
+<div>{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>通过<strong>列合并符</strong> (<code>||</code>)链接两个元素时, 它只会匹配被第二个CSS选择器匹配的元素,且此元素属于被第一个CSS选择器匹配的列元素.</p>
+
+<pre class="brush: css; no-line-numbers">/* 属于"被选择"列的表单元格 */
+col.selected || td {
+  background: gray;
+}
+</pre>
+
+<h2 id="语法">语法</h2>
+
+<pre><var>column-selector</var> || <var>cell-selector</var> {
+  <var>/* style properties */</var>
+}</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;table border="1"&gt;
+  &lt;colgroup&gt;
+    &lt;col span="2"/&gt;
+    &lt;col class="selected"/&gt;
+  &lt;/colgroup&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;A
+      &lt;td&gt;B
+      &lt;td&gt;C
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td colspan="2"&gt;D&lt;/td&gt;
+      &lt;td&gt;E&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;F&lt;/td&gt;
+      &lt;td colspan="2"&gt;G&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">评论补充</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>最初的定义.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">本页面的兼容性表格是从结构化的数据中产生的。如果你想要为这些数据作出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>，然后给我们一个拉取的请求。</div>
+
+<p>{{Compat("css.selectors.column")}}</p>
+
+<h2 id="相关">相关</h2>
+
+<ul>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("colgroup")}}</li>
+ <li>{{CSSxRef("grid")}}</li>
+</ul>