CSS选择器

CSS选择器

1.   标签选择器

p{}

2.   类选择器

.clsname{}

推荐类名

Ø  头:header

Ø  内容:content/container

Ø  尾:footer

Ø  导航:nav

Ø  侧边栏:sidebar

Ø  栏目:column

Ø  页面外围控制整体布局宽度:wrapper

Ø  左中右:leftcenter right

Ø  登录条:loginbar

Ø  标志:logo

Ø  广告:banner

Ø  页面主体:main

Ø  热点:hot

Ø  新闻:news

Ø  下载:download

Ø  子导航:subnav

Ø  菜单:menu

Ø  子菜单:submenu

Ø  搜索:search

Ø  友情链接:firendlink

Ø  页脚:footer

Ø  版权:copyright

Ø  滚动:scroll

Ø  内容:content

3.   ID选择器

#id{}

4.   通配符选择器

*{}

5.   复合选择器

 交集选择器(既又)

h1.clsname{}

 后代选择器

selector1 selector2{}

 并集选择器

selector1,selector2,selector3{}

6.   C3中的选择器

 子代选择器

selector1>selector2{}

子代选择器只能选择直接后代的元素.

后代选择器可以选中所有后代选择

 

 属性选择器

[calss^=”a”] {}  选中属性值以字母a开始

[class$="o"]{ }    选中属性值以字母0结束

[class*='o']{}     选中属性值中包含o

[class="two"]{}  选择器属性值等于two的标签

[class] {} 带有class属性的标签被选中

 伪类选择器

ｐ:first-child {}　选中父元素中第一个是p标签的子元素

p:last-child{}  选中父元素中最后一个是p标签的子元素

p:nth-child(n) {} 选中父元素中第n个子元素p标签

p:nth-child(odd) {}选中奇数个数的标签

p:nth-child(even){}选中偶数个数的标签

p:nth-last-child(3){} 倒数第3个标签被选中

 伪元素选择器

::first-letter{}  控制第一个字母（文字）的样式

::first-line {}  选中第一行的样式

::selection{ } 设置标签选中状态下的样式

该选择器中只能放置与颜色相关的属性。

 li+li