files/zh-cn/web/css/_colon_dir/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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>