---
title: CSS 參考文件
slug: Web/CSS/Reference
translation_of: Web/CSS/Reference
---
<p class="summary">Use this <strong>CSS reference</strong> to browse an <a href="#Keyword_index">alphabetical index</a> of all the standard <a href="/en-US/docs/Web/CSS">CSS</a> properties, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, and <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. You can also browse a list of all the CSS <a href="#Selectors">selectors organized by type</a> and a list of <a href="#Concepts">key CSS concepts</a>. Also included is a brief <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM reference</a>.</p>

<h2 id="基本語法規則">基本語法規則</h2>

<h3 id="Style_rule_syntax">Style rule syntax</h3>

<pre class="syntaxbox"><strong><var>selectorlist</var> {
  <var>property</var>: <var>value</var>;</strong>
  <var>[more property:value; pairs]</var>
<strong>}</strong>

... where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>

See <a href="#Selectors"><em>selector</em></a>, <a href="#pcls"><em>pseudo-class</em></a>, <em><a href="#pelm">pseudo-element</a></em> lists below.
</pre>

<h4 id="Style_rule_examples">Style rule examples</h4>

<pre class="brush: css">strong {
  color: red;
}

div.menu-bar li:hover &gt; ul {
  display: block;
}
</pre>

<p>For a beginner-level introduction to the syntax of CSS selectors, please see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">this tutorial</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">CSS syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>

<h3 id="At-rule_syntax">At-rule syntax</h3>

<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p>

<h2 id="Keyword_index">Keyword index</h2>

<div class="note">
<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p>
</div>

<div>{{CSS_Ref}}</div>

<h2 id="Selectors">Selectors</h2>

<h3 id="Basic_selectors"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Basic_selectors">Basic selectors</a></h3>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code>elementname</code></li>
 <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.classname</code></li>
 <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#idname</code></li>
 <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
 <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[attr=value]</code></li>
</ul>

<h3 id="Combinators"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Combinators">Combinators</a></h3>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling combinator</a> <code>A + B</code></li>
 <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling combinator</a> <code>A ~ B</code></li>
 <li><a href="/en-US/docs/Web/CSS/Child_selectors">Child combinator</a> <code>A &gt; B</code></li>
 <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant combinator</a> <code>A B</code></li>
</ul>

<h3 id="Pseudo-classes"><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a></h3>

<div class="index">
<ul>
 <li id="pcls">{{ Cssxref(":active") }}</li>
 <li>{{cssxref(':any')}}</li>
 <li>{{cssxref(':any-link')}}</li>
 <li>{{ Cssxref(":checked") }}</li>
 <li>{{ Cssxref(":default") }}</li>
 <li>{{ Cssxref(":defined") }}</li>
 <li>{{ Cssxref(":dir", ":dir()")}}</li>
 <li>{{ Cssxref(":disabled") }}</li>
 <li>{{ Cssxref(":empty") }}</li>
 <li>{{ Cssxref(":enabled") }}</li>
 <li>{{ Cssxref(":first") }}</li>
 <li>{{ Cssxref(":first-child") }}</li>
 <li>{{ Cssxref(":first-of-type") }}</li>
 <li>{{ Cssxref(":fullscreen") }}</li>
 <li>{{ Cssxref(":focus") }}</li>
 <li>{{ Cssxref(":focus-visible") }}</li>
 <li>{{ Cssxref(":host") }}</li>
 <li>{{ Cssxref(":host()") }}</li>
 <li>{{ Cssxref(":host-context()") }}</li>
 <li>{{ Cssxref(":hover") }}</li>
 <li>{{ Cssxref(":indeterminate") }}</li>
 <li>{{ Cssxref(":in-range") }}</li>
 <li>{{ Cssxref(":invalid") }}</li>
 <li>{{ Cssxref(":lang", ":lang()") }}</li>
 <li>{{ Cssxref(":last-child") }}</li>
 <li>{{ Cssxref(":last-of-type") }}</li>
 <li>{{ Cssxref(":left") }}</li>
 <li>{{ Cssxref(":link") }}</li>
 <li>{{ Cssxref(":not", ":not()") }}</li>
 <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
 <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
 <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
 <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
 <li>{{ Cssxref(":only-child") }}</li>
 <li>{{ Cssxref(":only-of-type") }}</li>
 <li>{{ Cssxref(":optional") }}</li>
 <li>{{ Cssxref(":out-of-range") }}</li>
 <li>{{ Cssxref(":read-only") }}</li>
 <li>{{ Cssxref(":read-write") }}</li>
 <li>{{ Cssxref(":required") }}</li>
 <li>{{ Cssxref(":right") }}</li>
 <li>{{ Cssxref(":root") }}</li>
 <li>{{ Cssxref(":scope") }}</li>
 <li>{{ Cssxref(":target") }}</li>
 <li>{{ Cssxref(":valid") }}</li>
 <li>{{ Cssxref(":visited") }}</li>
</ul>
</div>

<h3 id="Pseudo-elements"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></h3>

<div class="index">
<ul>
 <li id="pelm">{{ Cssxref("::after") }}</li>
 <li>{{ Cssxref("::backdrop") }}</li>
 <li>{{ Cssxref("::before") }}</li>
 <li>{{ Cssxref("::cue") }}</li>
 <li>{{ Cssxref("::first-letter") }}</li>
 <li>{{ Cssxref("::first-line") }}</li>
 <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::selection") }}</li>
 <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
</ul>
</div>

<div class="note">
<p><strong>See also:</strong> A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p>
</div>

<h2 id="Concepts">Concepts</h2>

<h3 id="Syntax_and_semantics">Syntax and semantics</h3>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li>
 <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li>
 <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li>
 <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li>
 <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
 <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li>
 <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
 <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li>
 <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
</ul>

<h3 id="Values">Values</h3>

<ul>
 <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li>
 <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li>
 <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li>
 <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li>
 <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li>
 <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li>
</ul>

<h3 id="Layout">Layout</h3>

<ul>
 <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
 <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li>
 <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li>
 <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li>
 <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
</ul>

<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>

<h3 id="Major_object_types">Major object types</h3>

<ul>
 <li>document.<a href="/en-US/docs/Web/API/Document/styleSheets">styleSheets</a></li>
 <li>styleSheets[i].<a href="/en-US/docs/Web/API/CSSRuleList">cssRules</a></li>
 <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSRule/cssText">cssText</a> (selector &amp; style)</li>
 <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
 <li>elem.<a href="/en-US/docs/Web/API/HTMLElement/style">style</a></li>
 <li>elem.style.<a href="/en-US/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
 <li>elem.<a href="/en-US/docs/Web/API/Element/className">className</a></li>
 <li>elem.<a href="/en-US/docs/Web/API/Element/classList">classList</a></li>
</ul>

<h3 id="Important_methods">Important methods</h3>

<ul>
 <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
 <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
</ul>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code>-moz</code>)</li>
 <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code>-webkit</code>)</li>
 <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS extensions</a> (prefixed with <code>-ms</code>)</li>
</ul>