css选择器
大家都知道css有很多选择器,我再这里总结一下,同时给总结梳理一下知识点
元素选择器:会选到html中所有相同元素名的标签
p{ font-size:16px; font-weight:blod; }
类选择器:会应用到具有这个类的元素 .+类名
.head{ font-size: 16px; color:red; }
id选择器:唯一性 #+id名
#main{ background-color:gray;
}
通配符(*)选择器 选中body含body标签里面的所有标签
*{ margin:0; padding:0; }
属性选择器 标签名+[ 属性名=“属性值”]
input [type="text"]{ background-color:red; }
伪类选择器 标签名+:+伪类名
/*未访问时*/ a:link{} /*访问后*/ a:visited{} /*鼠标悬停*/ a:hover{} /*鼠标点击下*/ a:active{}
伪元素
/*为了区分伪类和伪元素,css3将伪元素改为了::*/ a::before{ content="hello"; } a::after{ content="hello"; } /*首行*/ box:first-line{ background-color:pink; } /*首字母*/ box:first-letter{ font-weight:normal; }
li:nth-child(n){
background:url();
}
并集选择器(组合选择器) 同时选中多个标签 用英文逗号隔开
h1,h2,h3,h4{ font-weight:normal; }
后代选择器 选中一个标签的后代标签 书写方式为一个标签的标签名(类名或者id名等其他方式的选择器选中)+空格+后代标签的标签名(类名或者id名等其他方式的选择器选中)
.box span{
border:1px solid red;
}
子级选择器 选中所在标签的子级 选中所在标签+>+选中子级标签
.box>span{
border:1px solid red;
}