CSS3

属性选择器

1.[att*=val] 元素用att表示的属性的属性值中包含用val指定的字符

2.[att^=val] 元素用att表示的属性的属性值以val开头的元素

3.[att$=val] 元素用att表示的属性的属性值以val结尾的元素,以特殊字符结尾需要加\转义

伪元素选择器

1.first-line 向某个元素中的第一行文字使用样式 p:first-line{…}

2.first-letter 向某个元素中的文字的首字母(英文)或第一个字(中文)使用样式 同上

3.before 在某个元素之前插入一些内容

4.after 在某个元素之后插入一些内容 用于清除浮动 .className:after,.className:before{content:”“;display:block;clear:both;}

选择器root,not,empty,target

1.:root :root{…} :root 选择器匹配文档根元素在HTML中，根元素始终是 html 元素

2.:not(selector) 选择器匹配非指定元素/选择器的每个元素

3.:empty 当元素内容为空白时使用的样式

4.:target URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element):target 选择器作用于选取当前活动的目标元素

first-child,last-child,nth-child,nth-last-child

p:first-child{……} p:last-child{……}

p:nth-child(n){……} p:nth-last-child(n){……}

后两个分别是,选中第n个位置的元素,选中倒数第n个元素

ev:nth-child(odd) 选中第奇数个子元素 (如果第奇数个元素是ev则生效)

ev:nth-child(even) 选中第偶数个元素 (如果第偶数个元素是ev则生效)

:nth-last-child(odd),:nth-last-child(even)选中倒数第奇/偶数个元素

注意 :nth-child选择器并不是以相同元素计算奇偶,而是以所有同级元素计算

:nth-of-type(odd) :nth-of-type(even)可以避免以上情况

可以指定类型选中奇偶

:nth-last-of-type(odd) :nth-last-of-type(even)

循环选中

:nth-child(an+b)

el:only-child 当el父元素中只有一个el子元素时选中

状态伪类选择器

:hover 当鼠标移动到元素上时使用的样式

:active 当鼠标点击元素时使用的样式

:focus 当元素获取焦点时使用的样式

:enabled 当元素处于可用状态时使用的样式

:disabled 当元素处于不可用状态时使用的元素

:checked 当元素处于选中状态时的样式

:default 当页面打开时默认处于选取状态的单选框或复选框使用的样式,用户将复选框或单选框的选取状态设定为非选取状态,此样式依然有效

:indeterminate 当打开页面时,一组单选框中没有任何一个被设定为选取状态时整组单选框的样式,如果用户选取了其中任何一个样式,则该样式取消指定 ,目前只有opera支持

::selection 当元素处于选中状态时使用的样式(当鼠标选取段落文字,默认蓝底白字)

:invalid 当元素内容不能通过html5通过使用元素的诸如required(指定该字段必填),pattern(规定用于输入的字段模式.通过正则匹配)等属性所检察元素内容不符合规定样式例如(type=”email”)时的样式

:vaild 当元素可以通过检查时的样式,与invaild相反

:required 用来指定允许使用required属性,且已经指定了required属性的input,select,textarea元素的样式

:optional 用来指定允许使用required属性,且未指定required属性的input,select,textarea元素的样式

:in-range 当元素有效值被限定在一定范围内,且实际输入值在有效范围内时使用的样式 通常通过(min和max限制)

:out-of-range 当元素有效值被限定在一定范围内,且实际输入值不在有效范围内时使用的样式通常通过min和max指定

<input min=0 max=100 />

通用兄弟元素选择器

用来指定位于同一个父元素之中的某个元素hi后的所有其他某个种类的兄弟元素所使用的样式

大标题

中标题

中标题

中标题

大标题

中标题

中标题

中标题