1、类选择器 .class名{ }
2、id选择器 #id名{ }
3、元素选择器 元素名{ } eg:p{} h1{} div{}
4、属性选择器 选择器名[ 属性名 ]{ } eg:a[href] { color: red } 带有 href 属性的a标签颜色设置为红色
5、伪类选择器 eg:div:hover{ } 鼠标悬停在div上时
6、通配符选择器 *{ } eg: *{font-size: 16px} 文档中所有元素的字体大小为16px
7、群组选择器 选择器1 , 选择器2 , 选择器N{ } eg:.box1,#box2,p{} class为box1 id为box2 p标签
8、后代选择器(包含选择器) 选择器1 选择器2 选择器N{ } eg:h1 em{ } h1 元素中所有后代的 em元素
9、子元素选择器 父元素>子元素 eg:h1 > strong h1 元素中为直接后代的 strong 元素(直接父类为h1,不能是其他元素里包裹的 strong)
10、相邻兄弟选择器 选择器1 + 选择器2 eg: h1 + p{ } 选择紧跟在h1下面的p标签 注:两个选择器必须有共同的父元素,选择器2紧接着选择器1
10000 ! important // 无条件优先
1000 内联样式 style=" "
100 id选择器
10 类选择器、伪类、属性
1 标签、伪元素
0 通配符、子、相邻
无 继承
浏览器默认
先从高等级开始比较,
高等级相同时,再比较低等级
都相同时,后者优先,即样式覆盖