CSS选择器(重点)
1.标签选择器(元素选择器)
格式: 标签名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
缺点:无法差异化
2.类选择器
格式: .类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} //声明类样式
调用类样式 class="类名 "
CSS命名规则:
1.长词组可用-分割,以功能为类名 例:定义颜色 .c-orange {color:orange}
2.尽量不使用下划线
3.不使用数字,汉字
多类名选择器:
调用:class="类名 类名" 中间用空格隔开
3.ID选择器(类似于身份证号,是唯一的)
格式: #id名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
调用 id="id名" //只允许调用一次
4.通配符选择器
格式: *{属性1:属性值1;属性2:属性值2;属性3:属性值3;} *代表所有标签 //很少使用
5.伪类选择器
链接伪类选择器 链接未写可用#代替
顺序尽量不要颠倒 lv ha
link{ } //未访问的链接 格式 a:link{}
visited{ } //已访问的链接 格式 a:visited{} //不常用
hover{ } //鼠标移动到链接上 格式 a:hover{}
active{ } //选定的链接(点击链接未松开鼠标) 格式 a:active{} //不常用
结构(位置)伪类选择器
x:first-child 选取其父元素的首个子元素的指定选择器
x:last-child 选取其父元素的最后一个子元素的指定选择器
x:nth-child() 匹配其父元素的第N个子元素
()参数
even 选择所有偶数的子元素
odd 选择所有奇数的子元素
n 选择所有元素 (可通过公式表达)
2n 选择所有偶数的子元素
2n+1 选择所有奇数的子元素
x:nth-child(eveb) 正数,选择偶数元素
x:nth:last-child(even) 倒数 选择偶数元素
6.目标伪类选择器
:target 选取当前活动的目标元素
CSS复合选择器
1.交集选择器
第一个为标签选择器,第二个为class选择器
中间不可以有空格 以·相连 例 div.font-size (同时满足两个条件)
2.并集选择器
中间不可以有空格 以 , 相连 (同类属性 可一起设置 声明的类名也可以)
3.后代选择器(儿子 孙子 都可以)
外层标签写在前面,内层标签写后面 空格隔开
4.子元素选择器(只有亲儿子)
爸爸标签写在前面 亲儿子标签写在后面 >隔开
5.属性选择器
选取标签中带有某些特别属性的选择器 用[ ]隔开
标签[属性]
标签[属性=参数]
标签[属性^=参数] 以参数开头的都被选取
标签[属性$=参数] 以参数结尾的都被选取
标签[属性*=参数] 任意位置
6.伪元素选择器
格式
标签名::first-letter{} 选择第一个字
标签名::first-line{} 选择第一行
标签名::selection{} 选中
标签名::before{ content:"内容" } 在前面插入内容
标签名::after{ content:"内容" } 在后面插入内容
CSS书写规范
空格规范
1.选择器 { }之间敲空格(div { })
2.属性名和之后的 : 之间不允许包含空格 :与属性值之间必须包含空格 (font-size: 12px)
3.当一个rule包含多个选择器时,每个选择器必须独占一行
格式如下:
.post,
.font-size,
.color{}
4.选择器的嵌套层应不大于3级,位置靠后的限定条件应尽可能准确
5.属性定义后用分号 ; 结尾
Chrome 调试开发者工具检查
F12 打开
左面为html代码,右面为css
ctrl+ +(加号)调节代码大小 ctrl +鼠标滚轮 调节工具台大小
调节页面字体大小,上下箭头,可测试字体大小