css元素选择器

通配符选择器 *

任何元素

分组选择器 ,

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

h1, h2, h3, h4, h5, h6

多类选择器

.X.Y {background:red;}

类名为 X 且为 Y
兼容ie7+

id选择器 #

• 只能在html文档中使用一次，仅一次
• id选择器不能结合使用

属性选择器

[attr]

属性为attr

[attr = value]

指定属性和值的元素

[attr ~=value]

属性的值中有包含value这个单词

[attr |= value]

指定值为value 或者 value- 开头的属性attr

[attr ^= value]

指定值为value开头的属性attr

[attr $= value]

指定值为value结尾的属性attr

[attr *= value]

指定值包含value的属性attr

/ 注意区别：

 [attr |= value]   以 value | value- 开头     
 [attr ^= value]   以 value 开头

 [attr *= value]   包含 value 
 [attr ~= value]   包含 value 的单词

/

兄弟选择器 子选择器

X Y

X 元素下所有元素 Y

X + Y

紧邻 X 后的第一个兄弟元素 Y

X ~ Y

紧邻 X 后的所有兄弟元素 Y

X > Y

X 的所有子元素 Y

伪类选择器

:link

未访问链接

:visited

已访问的链接

:active

选定的链接

:focus

处于点击focus状态
不兼容ie

:hover

鼠标移动到的链接

:first-child

不同于元素的第一个子元素，是将作为第一个元素
eg. p:first-child 指第一个元素为p的元素
eg. p > i:first-child 指p的子元素中，第一个子元素且元素为i
eg. p:first-child i 指p作为第一个元素下所有的i元素

:last-child

不同于元素的最后一个子元素，是将作为最后一个元素

:lang

指定有lang属性值相同的元素
eg. p:lang(value) p元素中lang属性为value的值

:not(selector)

选取除了selector之外的所有元素
eg. div:not(.class1) 选取div中没有class1类名的元素
兼容ie9+

X:nth-child(n)

选取第n个孩子并且为X

X:nth-last-child(n)

选取倒数第n个孩子并且为X

X:nth-of-type(n)

选取 X 元素中的第n个

X:nth-last-of-type(n)

选取 X 元素中的倒数第n个

///注意
选取ul的首个子元素   ul >:nth-child(1) 相当于 ul >:first-child  
选取ul子元素中为li元素的第1个元素 ul > li:nth-type-of(1)
区分X:nth-of-type(n)   X:nth-child(n)
X:nth-of-type(n)   选取在X类型中的第n个
X:nth-child(n)  选取在第n个元素并且类型为X

伪元素选择器

::first-line (只对块级元素生效)

文本的首行设置特殊样式

::first-letter

段落的第一个字母

:before

元素之前添加内容

:after

元素之后添加内容