今天学习的CSS选择器总结一下
1,id选择器
#h1 {
CSS样式
}/* id选择器 id匹配的所有标签都会加载样式 */
2,Class选择器
.style1 {
CSS样式
}
/* 类选择器 Class匹配的所有标签都会加载样式 */
id选择器和类选择器的区别是 id是CSS找id 类选择器是 类找CSS
3,标签选择器
h1 {
CSS样式
}
/* 标签选择器 标签匹配的所有标签都会加载样式 */
4,属性选择器
h1[type="text"]{ CSS样式 }
/* 属性选择器 属性匹配的所有标签都会加载样式
可以指定标签类型*/
5,伪类选择器
a:link{ CSS样式 }/* 打开网页 加载这段样式 */
a:hover{ CSS样式 /* 鼠标放在标签上 加载这段样式 */
a:active{ CSS样式 }/* 点击标签 加载这段样式 */
a:visited{ CSS样式 }/* 点击标签之后 加载这段样式 */
/* 伪类选择器*/
!!!伪类选择器必须按照上面的顺序进行定义 否则无法生效
6,全局选择器
*{ CSS样式 }/* 全局选择器 所有标签都会加载样式 */不推荐使用
7,后代选择器
h1 em { CSS样式 }
h1 em的写法适用于h1中的的所有em,且不管em嵌套多少层都会适用
8,子代选择器
h1 > strong { CSS样式 }
strong 的父元素是h1标签strong才会生效
CSS是有优先级的
内联样式> id选择器> Class选择器>类型选择器=标签选择器>通用选择器=子选择器等