initial commit

1 files changed, 115 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_colon_dir/index.html b/files/zh-cn/web/css/_colon_dir/index.html
new file mode 100644
index 0000000000..9cd5b27a7f
--- /dev/null
+++ b/files/zh-cn/web/css/_colon_dir/index.html
@@ -0,0 +1,115 @@
+---
+title: ':dir()'
+slug: 'Web/CSS/:dir'
+tags:
+  - CSS伪类
+  - 布局
+  - 网络
+  - 选择器4
+translation_of: 'Web/CSS/:dir'
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="总结">总结</h2>
+
+<p><code>:dir()</code>伪类匹配特定文字书写方向的元素。在HTML中, 文字方向由{{ htmlattrxref("dir", "html") }}属性决定。其他的文档类型可能有其他定义文字方向的方法。</p>
+
+<p>值得注意的是用CSS伪类 <code>:dir()</code> 并不等于使用 <code>[dir=…]</code> 属性选择器。后者匹配 {{ htmlattrxref("dir", "html") }} 的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的， <code>[dir=rtl]</code> 或 <code>[dir=ltr]不会匹配到dir属性的值为auto的元素。而</code> <code>:dir()</code>会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的。</p>
+
+<p><span style="font-family: consolas,monaco,andale mono,monospace;">另外，:dir()伪类仅考虑文档（大多数情况是HTML）中定义的文字方向的语义值(semantic value)，并不会考虑格式值(styling value)，如CSS属性</span> {{ cssxref("direction") }} 的值。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">元素:dir(文字书写方向) { <em>style properties</em> } 文字书写方向为ltr或rtl
+</pre>
+
+<h2 id="Examples" name="Examples">示例</h2>
+
+<pre class="brush:html;">&lt;div dir="rtl"&gt;
+  &lt;span&gt;test1&lt;/span&gt;
+  &lt;div dir="ltr"&gt;test2
+    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>本例中 <code>:dir(rtl)</code> 会匹配最外层的div，内容为<code>test1的span，</code>和有希伯来字符的div。<code>:dir(ltr)</code> 会匹配到内容为<code>test2的div.</code></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-dir-pseudo', ':dir()') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>最初定义.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("17") }} {{ property_prefix("-moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("17") }} {{ property_prefix("-moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Related_Pages" name="Related_Pages"> </h2>
+
+<h2 id="Related_Pages" name="Related_Pages">参见</h2>
+
+<ul>
+ <li>语言相关伪类: {{ cssxref(":lang") }}, {{ cssxref(":dir") }}</li>
+</ul>