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 无穷大