小悠学习——快乐工作,悠闲生活.超全的IT开发手册!
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULAR XML
×

CSS 参考手册

CSS 参考手册 CSS 选择器 CSS 语音参考 CSS Web安全字体组合 CSS 单位 CSS 颜色 CSS 合法颜色值 CSS 颜色名称 CSS 颜色十六进制值 CSS3 浏览器支持参考手册

CSS 属性

CSS align-content CSS align-items CSS align-self CSS3 animation CSS3 animation-delay CSS3 animation-direction CSS3 animation-duration CSS3 animation-fill-mode CSS3 animation-iteration-count CSS3 animation-name CSS3 animation-play-state CSS3 animation-timing-function CSS3 appearance CSS3 backface-visibility CSS background CSS background-attachment CSS3 background-clip CSS background-color CSS background-image CSS3 background-origin CSS background-position CSS background-repeat CSS3 background-size CSS border CSS border-bottom CSS border-bottom-color CSS3 border-bottom-left-radius CSS3 border-bottom-right-radius CSS border-bottom-style CSS border-bottom-width CSS border-collapse CSS border-color CSS3 border-image CSS3 border-image-outset CSS3 border-image-repeat CSS3 border-image-slice CSS3 border-image-source CSS3 border-image-width CSS border-left CSS border-left-color CSS border-left-style CSS border-left-width CSS3 border-radius CSS border-right CSS border-right-color CSS border-right-style CSS border-right-width CSS border-spacing CSS border-style CSS border-top CSS border-top-color CSS3 border-top-left-radius CSS3 border-top-right-radius CSS border-top-style CSS border-top-width CSS border-width CSS bottom CSS3 box-align CSS3 box-direction CSS3 box-flex CSS3 box-flex-group CSS3 box-lines CSS3 box-ordinal-group CSS3 box-orient CSS3 box-pack CSS3 box-shadow CSS3 box-sizing CSS caption-side CSS clear CSS clip CSS color CSS3 column-count CSS3 column-fill CSS3 column-gap CSS3 column-rule CSS3 column-rule-color CSS3 column-rule-style CSS3 column-rule-width CSS3 column-span CSS3 column-width CSS3 columns CSS content CSS counter-increment CSS counter-reset CSS cursor CSS direction CSS display CSS empty-cells CSS flex CSS flex-basis CSS flex-direction CSS flex-flow CSS flex-grow CSS flex-shrink CSS flex-wrap CSS float CSS font CSS3 @font-face 规则 CSS font-family CSS font-size CSS3 font-size-adjust Property CSS3 font-stretch CSS font-style CSS font-variant CSS font-weight CSS3 grid-columns CSS3 grid-rows CSS3 hanging-punctuation CSS height CSS3 icon CSS justify-content CSS3 @keyframes 规则 CSS left CSS letter-spacing CSS line-height CSS list-style CSS list-style-image CSS list-style-position CSS list-style-type CSS margin CSS margin-bottom CSS margin-left CSS margin-right CSS margin-top CSS max-height CSS max-width CSS min-height CSS min-width CSS3 nav-down CSS3 nav-index CSS3 nav-left CSS3 nav-right CSS3 nav-up CSS3 opacity Property CSS order CSS outline CSS outline-color CSS3 outline-offset CSS outline-style CSS outline-width CSS overflow CSS3 overflow-x CSS3 overflow-y CSS padding CSS padding-bottom CSS padding-left CSS padding-right Property CSS padding-top CSS page-break-after CSS page-break-before CSS page-break-inside CSS3 perspective CSS3 perspective-origin CSS position CSS3 punctuation-trim CSS quotes CSS3 resize CSS right CSS3 rotation CSS tab-size CSS table-layout CSS3 target CSS3 target-name CSS3 target-new CSS3 target-position CSS text-align CSS text-align-last CSS text-decoration CSS text-decoration-color CSS text-decoration-line CSS text-decoration-style CSS text-indent CSS3 text-justify CSS3 text-outline CSS3 text-overflow CSS3 text-shadow CSS text-transform CSS3 text-wrap CSS top CSS3 transform CSS3 transform-origin CSS3 transform-style CSS3 transition CSS3 transition-delay CSS3 transition-duration CSS3 transition-property CSS3 transition-timing-function CSS unicode-bidi CSS vertical-align CSS visibility CSS white-space CSS width CSS3 word-break CSS word-spacing CSS3 word-wrap CSS z-index CSS3 @media 查询
 

CSS 选择器



CSS选择器用于选择你想要的元素的样式的模式。

"CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。

选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素 1
#id #firstname 选择所有id="firstname"的元素 1
* * 选择所有元素 2
element p 选择所有<p>元素 1
element,element div,p 选择所有<div>元素和<p>元素 1
element element div p 选择<div>元素内的所有<p>元素 1
element>element div>p 选择所有父级是 <div> 元素的 <p> 元素 2
element+element div+p 选择所有紧接着<div>元素之后的<p>元素 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2
[attribute|=language] [lang|=en] 选择一个lang属性的起始值="EN"的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个<P>元素的第一个字母 1
:first-line p:first-line 选择每一个<P>元素的第一行 1
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。 2
:before p:before 在每个<p>元素之前插入内容 2
:after p:after 在每个<p>元素之后插入内容 2
:lang(language) p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute*=value] a[src*="44lan"] 选择每一个src属性的值包含子字符串"44lan"的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素,从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素,从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素(包括文本节点) 3
:target #news:target 选择当前活动的#news元素(包含该锚名称的点击的URL) 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"(只读) 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3