initial commit

1 files changed, 94 insertions, 0 deletions

diff --git a/files/zh-cn/glossary/css_selector/index.html b/files/zh-cn/glossary/css_selector/index.html
new file mode 100644
index 0000000000..88170cdb72
--- /dev/null
+++ b/files/zh-cn/glossary/css_selector/index.html
@@ -0,0 +1,94 @@
+---
+title: Selector (CSS)
+slug: Glossary/CSS_Selector
+tags:
+  - CSS
+  - CSS 选择器
+  - Glossary
+  - HTML
+  - 选择器
+translation_of: Glossary/CSS_Selector
+---
+<p>CSS 选择器是 CSS 规则的一部分，用于匹配文档中的元素。匹配的元素将会拥有规则指定的样式。</p>
+
+<div id="glossary-selector-details">
+<p>看下面的 CSS：</p>
+
+<pre class="brush: css notranslate">p {
+  color: green;
+}
+
+div.warning {
+  width: 100%;
+  border: 2px solid yellow;
+  color: white;
+  background-color: darkred;
+  padding: 0.8em 0.8em 0.6em;
+}
+
+#customized {
+  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
+}</pre>
+
+<p>选择器例如： "p" (文档中的 p 标签都会拥有绿色字体的样式),  "div.warning" (文档中所有class 包含 warning 的 div 元素都会有一个看起来像警告框的样式)，"#customized" (id 为 "customized" 的元素中的文本为16px高，字体是Lucida Grande, Arial, Halvetica等 无衬线字体。)</p>
+
+<p>我们可以把上面的 css 添加给 HTML ：</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;This is happy text.&lt;/p&gt;
+
+&lt;div class="warning"&gt;
+  Be careful! There are wizards present, and they are quick to anger!
+&lt;/div&gt;
+
+&lt;div id="customized"&gt;
+  &lt;p&gt;This is happy text.&lt;/p&gt;
+
+  &lt;div class="warning"&gt;
+    Be careful! There are wizards present, and they are quick to anger!
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>页面的内容将会呈现如下风格：</p>
+
+<p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>查看我们的关于选择器的介绍 <a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a></li>
+ <li>基础选择器
+  <ol>
+   <li><a href="/zh-CN/docs/Web/CSS/Type_selectors">标签选择器</a><code> elementname</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/Class_selectors">类选择器</a> <code>.classname</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/ID_selectors">ID 选择器</a> <code>#idname</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/Universal_selectors">通配选择器</a><code> * ns|* *|*</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/Attribute_selectors">属性选择器</a><code> [attr=value]</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/Pseudo-classes">状态选择器</a><code> a:active, a:visited</code></li>
+  </ol>
+ </li>
+ <li>组选择器
+  <ol>
+   <li><a href="/zh-CN/docs/Web/CSS/Selector_list">Selector list</a> <code>A, B</code></li>
+  </ol>
+ </li>
+ <li>关系选择器
+  <ol>
+   <li><a href="/zh-CN/docs/Web/CSS/Adjacent_sibling_selectors">邻近兄弟元素选择器</a> <code>A + B</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/General_sibling_selectors">兄弟元素选择器</a> <code>A ~ B</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/Child_selectors">直接子元素选择器</a> <code>A &gt; B</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/Descendant_selectors">后代元素选择器</a> <code>A B</code></li>
+  </ol>
+ </li>
+ <li>伪选择器 (Pseudo)
+  <ol>
+   <li><a href="/zh-CN/docs/Web/CSS/Pseudo-classes">伪类</a> <code>:</code></li>
+   <li><a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a> <code>::</code></li>
+  </ol>
+ </li>
+ <li>定义参考
+  <ol>
+   <li>{{SpecName("CSS3 Selectors")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>