diff options
Diffstat (limited to 'files/zh-cn/glossary/css_selector')
| -rw-r--r-- | files/zh-cn/glossary/css_selector/index.html | 94 |
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"><p>This is happy text.</p> + +<div class="warning"> + Be careful! There are wizards present, and they are quick to anger! +</div> + +<div id="customized"> + <p>This is happy text.</p> + + <div class="warning"> + Be careful! There are wizards present, and they are quick to anger! + </div> +</div></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 > 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> |