类选择器:
eg. <div class = "a"></div>
CSS中用“.”号选中该类【 .a{...} 】
若某元素同时属于多个类
eg. <div class = "a" class = "b"><div>
CSS中用紧挨着多个“.”号选中【 .a.b{...} 】(若之间有空格如.a .b则含义为选中类a下的类b元素)
ID选择器:
eg. <div id = "a"></div>
CSS中用“#”号选中 【 #a{...} 】
属性选择器:
eg. <button title= "abc"></button>
1)用“[xx]”选中含有xx属性的元素
【 [title]{...} 】
2)用“ [xx="yy"] ”选中xx属性为"yy"的元素
【 [title="abc"]{...} 】
3)用“ 【xx^="yy"】 ”选中xx属性最前面一部分内容为"yy"的元素
【 [title^="a"]{...} 】
4)用“ [xx$="yy"] ”选中xx属性最后面一部分内容为"yy"的元素
【 [title$="c"]{...} 】
后代选择器:
CSS中用空格隔开的类选择器选中某元素的某后代元素
eg. 选中类a下所有的类b后代:【 .a .b{...} 】
用“*”表示某元素的所有后代元素(单独“*”号则代表页面中所有元素)
【 .a * {...} 】
相邻选择器及通用相邻选择器:
1)用“+”来选择紧接在某元素后的一个元素(二者要有相同的父元素)
eg.选择类a的后一个相邻的兄弟div:【 .a + div {...} 】
2)用“~”来选择紧接在某元素后的所有元素(二者要有相同的父元素)
eg.选择类a后面所有的兄弟div:【 .a ~ div {...} 】
伪类:
用“:”来选择某伪类
常用伪类eg.
【 a:link {...} //未访问过的链接 】
【 a:visited {...} //已访问过的链接 】
【 a:hover {...} //鼠标移动到链接上 】
【 a:active {...} //鼠标点击链接瞬间 】
【 input:focus {...} //鼠标选中输入框 】
(ps: a:hover 必须被置于 a:link 和 a:visited 之后,a:active 必须被置于 a:hover 之后)
伪元素:
用“:”或“::”来选择某伪元素
常用伪元素eg.
【 p:first-leter {...} //段落的首字母 】
【 h1:before {content:"xx";} //在h1元素前插入内容“xx”】
【 h1:after {content:"xx";} //在h1元素后插入内容“xx”】
【 div p:first-child {content:"xx";} //在div里面的第一个p元素后插入内容“xx”】
【 div p:nst-child( 这里传参 ) {content:"xx";} //在div里面第N个的p元素后插入内容“xx”】
选择器权重:
1000 -- 100 -- 10 -- 1 分为四个等级,权重可以累加
style属性(内联) > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器
字体属性:
常用举例:
字体类型【 font-family: "微软雅黑", "Microsoft Yahei"; 】(用","隔开多个值将会从前往后找,直到找到匹配字体,找不到则为默认字体)
字体粗细(字重)【 font-weight: xx(100~900之间的一个值); 】
字体大小【 font-size: 13px / xx%(母元素的百分比大小); 】