css3选择器

简单选择器 –

1 *{} /通配符: 选择body内所有元素,经常用于清除默认样式.

2 p{} /元素选择器.标签选择器: 直接写标签p li img span h1-h6….

3 #box{} /类选择器: (class =”box” class设置#选择) 类名可重复.

4 box{} / id选择器: (id=”box” id设置 .选择)  id名字唯一.

5 div p span后代.包含选择器: div下p下span元素.

高级选择器 --

1 p,span 组合.多元素选择器: 同时选择p span标签/元素 ,隔开

 .boxp,span(box失效会选择其他p span) .box p .box span代替

2 p>span子元素选择器:选择p的span子元素 >隔开

3 p+span相邻兄弟选择器: 选择p相邻的span元素 +隔开 只选择span4

4 p ~ .box 关联选择器: 选择p后的box类及后代

属性选择器 --

1 [href]{} 属性选择器: 选择具有href属性的元素

2 a[herf]{} 选择标签a具有herf属性的元素

3 [href=””]{} 选择指定属性值的元素

4 [href ~=”//”]{} 选择指定属性值包含//的元素 前后必须有空

5 [href |=”//”]{} 选择指定属性值以//开头的元 //开头

Css3

1 [href ^=”//”]{} 以//开头

2 [href $=”//”]{} 以//结尾

3 [href *=”//”]{} 包含//

伪类选择器 --

1 :hover /p:hover {} 鼠标移上去/移到p标签上去的样式

2 p:hover span{} 鼠标移到p标签后代span标签的样式

3 :link{} / a:link{} 未被访问链接的样式

4 :active{} / a:active{} 正在访问链接的样式

5 :visited{} / :visited{} 已被访问的链接的样式

6 :focus{} / input:focus{} 获取焦点/输入框获取焦点后的样式6 

伪元素  

1 p:before{content:”内容”;样式} 在p标签之前添加样式及内容

2 p:after{content:”内容”;样式}在p标签之后添加样式及内容 

.box:befter {

   content:”新加内容”;

   color: red;}

在类为box的元素里边前部添加”新加内容”,字体颜色红色。

css3

子类型

p:first-of-type{} 第一个 (泛指多个相同同时选择)

p:last-of-type{} 最后一个 (泛指多个相同同时选择)

p:last-of-type{} 最后一个 (泛指多个相同同时选择)

p:nth-of-type(3){} 第3个(泛指多个相同同时选择)

p:nth-last-of-type(3){} 倒序第3个 (泛指多个相同同时选择)

a: only-of-type{} 唯一子元素a (泛指多个相同同时选择)

子元素

p:first-child{} 选择同级p标签的第一个p标签

p:last-child{} 选择同级p标签的最后一个p标签

a:only-child{} 唯一子元素a

p:nth-child(n){} 选择同级p标签指定的p标签 n指定的  

p:not(.select){} 选择p同级非.select元素

p:empty{} 内容为空的p标签 嵌套有标签不为空

p:target{} 激活的锚点

p::selection{} 选中p标签 color background可变

li:nth-child(n+4){background:#090}  大于等于4的li标签

li:nth-child(-n+4){background:#090} 小于等于4的li标签

li:nth-child(2n){background:#090}  偶数的li标签  2n可以为even

li:nth-child(2n-1){background:#090}  奇数的标签 2n-1可以为odd

li:nth-child(3n+1){background:#090}  3n+1表示隔取1

 

表单元素

input:enabled{} 可用选择

<input type=”text” enabled=”enabled”>

input:disabled{} 不可用选择

<input type=”text” disabled=”disabled”>

Input:checked{} 选中选择

<input type=”check” checked=”checked”>