CSS

选择器

css中的选择器

背景颜色、图像

background background-attachment background-clip background-color background-image background-origin backgrond-position background-repeat background-size

文字、字体

color font font-family font-size font-size-adjust font-style font-variant font-weight

文档格式

hanging-punctuation hyphens letter-spacing line-height text-align text-decoration text-indent text-overflow text-shadow text-transform white-space word-spacing word-wrap

宽度和高度

width,height max-width min-width max-height min-height

外缘与内缘余白

margin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left padding-right padding-top

边框

border border-bottom border-color border-style border-width border-top border-right border-left

边框圆角

border-radius border-bottom-right-radius border-bottom-left-radius border-top-right-radius border-top-left-radius

边框图像

border-image border-image-repeat border-image-slice border-image-source border-image-width

容器与弹性容器

bottom clear clip box-decoration-break box-shadow align-content align-items align-self display flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content float left outline-offset overflow overflow-x overflow-y order position right resize top vertical-align z-index

透明

opacity rgba

渐变

linear-gradient radial-gradient

文章分栏

break-after break-before break-inside columns column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width

时间过渡效果

transition transition-delay transition-duration transition-property transition-timing-function

动漫效果

@keyframes animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

2D、3D变形

transform translate matrix2d matrix3d perspective scale skew rotate transform-origin

颜色、尺寸、单位

角度与URL 颜色 单位长度

表格

border-collapse border-spacing caption-side empty-cells table-layout

列表

counter-increment counter-reset list-style list-style-type list-style-image list-style-position

基本的用户界面属性

box-sizing content cursor nav-index nav-left nav-down nav-right nav-up

CSS基础

更新时间:2014年10月

css中的选择器

css中,适用层叠样式集合体的对象部分称为选择器。根据使用情况,css中的选择器大体分为元素(类型)选择器、通用选择器、属性选择器、类选择器、ID选择器、伪类选择器、选择器的组合。

css一栏为该当选择器被定义的版本序列号。

css中的选择器
选择器 对于例的说明 css
* * 所有元素的选择器,通用选择器 2
元素 h1 p元素的选择器,元素选择器 1
.类 .sample 使用class="sample"包含的所有元素,类选择器 1
#id #firstname 使用id="firstname"包含的所有元素,ID选择器 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
element1~element2 p ~ ul 相同母元素中,p元素后面出现的ul元素所适用的选择器。选择器的组合 3
[属性] h1[title] 带有title属性的元素h1元素的选择器。属性选择器 2
[属性=值] h1[target=_blank] 带有target属性且其值为"_blank"的元素的选择器。属性选择器 2
[属性~=值] h1[title~=example] 带有的title属性的值有多个,其中含有example值的h1元素的选择器。属性选择器 2
[属性|=值] h1[lang|=en] 带有的lang属性的值中以en为开头的h1元素的选择器。如lang属性的值带有[en]、[en-US]、[en-cockney]的,都在其中。属性选择器 2
[属性^=值] a[href^="https"] 带有的href属性的值以https为开头的a元素的选择器。属性选择器 3
[属性$=值] a[href$=".pdf"] 带有的href属性的值以pdf结束的a元素的选择器。属性选择器 3
[属性*=值] a[href*="webkkl"] 带有的href属性的值中包含有webkkl文字列的a元素的选择器。属性选择器 3
:active a:active 当元素被选中(被点击)时适用的选择器。伪类选择器 1
:link a:link 没有访问前,带有链接的元素的选择器。伪类选择器 1
:visited a:visited 访问过后,带有链接的元素的选择器。伪类选择器 1
:hover a:hover 当鼠标放到元素上时,该当元素适用的选择器。伪类选择器 1
:focus a:focus 定位到元素上时,该当元素适用的选择器。伪类选择器 2
元素名:target p:target 链接终点中p元素适用的选择器。伪类选择器 2
元素名:lang() p:lang(en) p元素中,当遇到使用lang指定的语言时适用该当选择器。伪类选择器 2
元素名:enabled input:enabled 对有效元素适用的选择器。伪类选择器 3
元素名:disabled input:enabled 对无效元素适用的选择器。伪类选择器 3
元素名:checked input:checked 处于被选择状态的按钮或选框上适用的选择器。伪类选择器 3
元素名:root :root 文档中的根元素上适用的选择器。伪类选择器 3
:nth-child() p:nth-child(n) 相同母元素中第n个子元素(这里是p元素)上适用的选择器。伪类选择器 3
:nth-last-child() p:nth-last-child(n) 相同母元素中最后的子元素(这里是p元素)上适用的选择器。伪类选择器 3
:nth-of-type() p:nth-of-type(n) 相同母元素中被指定的相同子元素(这里是p元素)的第n个上适用的选择器。伪类选择器 3
:nth-last-of-type() p:nth-last-of-type(n) 相同母元素中被指定的相同子元素(这里是p元素)的倒数第n个上适用的选择器。伪类选择器 3
:first-child p:first-child 指定的元素(这里是p元素)为母元素的最初子元素时适用的选择器。伪类选择器 3
:last-child p:last-child 指定的元素(这里是p元素)为母元素的最后子元素时适用的选择器。伪类选择器 3
:first-of-type p:first-of-type 相同母元素中,指定的元素(这里是p元素)的第一个上适用的选择器。伪类选择器 3
:last-of-type p:last-of-type 相同母元素中,在指定的元素(这里是p元素)中,对最后一个所适用的选择器。伪类选择器 3
:only-child p:only-child 指定的元素(这里是p元素)是母元素中唯一的子元素时,适用的选择器。伪类选择器 3
:only-of-type p:only-of-type 指定的元素(这里是p元素)是母元素中该种类型的唯一子元素时,适用的选择器。伪类选择器 3
:empty td:empty 当元素(这里是td元素)中没有子元素、元素内容时适用的选择器。伪类选择器 3
:not() :not(.sample) 当不是指定的元素/选择器(这里是.sample)时,适用的选择器。伪类选择器 3
:valid input:valid 当元素(这里是input元素)的值为有效值时所适用的选择器。伪类选择器 3
:invalid input:invalid 当元素(这里是input元素)的值为无效值时所适用的选择器。伪类选择器 3
:in-range input:in-range 元素(这里是input元素)的值在设定范围内时所适用的选择器。伪类选择器 3
:out-of-range input:out-of-range 元素(这里是input元素)的值不在设定范围内时所适用的选择器。伪类选择器 3
:required input:required 当指定元素(这里是input元素)的值为required属性时所适用的选择器。伪类选择器 3
:optional input:optional 当指定元素(这里是input元素)的值没有required属性时所适用的选择器。伪类选择器 3
:read-only input:read-only 当指定元素(这里是input元素)的值为readonly属性(只读)时所适用的选择器。伪类选择器 3
:read-write input:read-write 当指定元素(这里是input元素)的值没有指定为readonly属性(只读)时所适用的选择器。伪类选择器 3
::before p::before p元素之前生成、插入的内容适用的选择器。伪元素 2
::after p::after 紧跟p元素之后生成、插入的内容适用的选择器。伪元素 2
::first-line p::first-line 指定的p元素的最初一行适用的选择器。伪元素 2
::first-letter p::firset-letter 指定的p元素的最初一文字适用的选择器。伪元素 2
::selection ::selection 适用于选择结果上的选择器。伪元素 3