CSS 选择器

1 基本选择器

HTML元素选择器

 div {

 }

ID选择器

 #idName {

 }

CLASS选择器

 .className {

 }

全局选择器

 * {

 }

2 组合选择器

后代选择器

 选择器 选择器 {

 }
 .nav li {}
 #box div {}
 div .list {}
 .container li {}

子元素选择器

 选择器>选择器 {

 }
 .nav>li {}
 #box>div {}
 div>.list {}
 .container>li {}

群组选择器(并集选择器)

 选择器,选择器,选择器 {

 }

 body,ul,li,p,figure,table,.item,.list-item {

 }

多选择器(交集选择器)

 div.item {

 }
 .item.list-item {

 }
 div#container {

 }

3 伪类选择器

E:link

设置超链接a在未被访问前的样式。

E:visited

设置超链接a在其链接地址已被访问过时的样式。

E:hover

设置元素在其鼠标悬停时的样式。

E:active

设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

注意,a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后

4 选择器权重

计算 选择符 中ID的数量(=a)                    
计算 选择符 中 类选择器 属性选择器 伪类选择器 的数量(=b)    
计算选择符 中 标签选择器 伪对象选择器的数量 (=c)        
忽略全局选择器                            
a的权重100  b的权重10   c的权重1    相加
标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important
   1         10        100       1000     无穷大

results matching ""

    No results matching ""