在学习css的第二天,学习了关于选择器、继承、单位等一些知识点,如下所示。
1、属性选择器 【表单元素】
[key] 选中所有具有key属性的元素
[key=val]选中所有具有key属性并且值是val的元素
参考1-attr.html
2、伪类选择器
:link a标签未点击时
:hover a标签光标悬浮时
:active a标签点击时
:visited a标签访问时
:focus 聚焦
:first-child
:last-child
:nth-child(n)
:nth-child(1) ==> :first-child
:nth-child(2)
:nth-child(3) ==> :last-child
3、伪元素选择器
::before 在当前选中的元素前面创建出一个伪元素
::after 在当前选中的元素后面创建出一个伪元素
清除浮动
4、级联【权重】
浏览器采用css样式的顺序
1.!important
具有该属性值的样式,优先级最高
2.特性值
内联样式 1000
id选择器 100
类选择器\伪类选择器\属性选择器 10
标签选择器\伪元素选择器 1
3.css代码的顺序
谁离选中的元素近,采用谁的样式【就近原则】
5、继承
样式从父元素继承到子元素的过程
1)可以继承的样式
font-size 字体大小
color 字体颜色
cursor 鼠标形状
2)不可继承的样式
height 高度
width 宽度
margin 外边距
padding 内边距
background-color 背景色
6、单位
1)颜色
十六进制颜色
#cccccc; => #ccc;
#c3c3c3
#ffffff; => #fff;
关键字 red/orange/yellow/blue...
rgb
r -> red 0~255
g -> green 0~255
b -> blue 0~255
rgba
r -> red 0~255
g -> green 0~255
b -> blue 0~255
a -> 模糊程度 0~255
2)长度/尺寸
绝对单位
px 像素
相对单位
em 参考父元素的字体大小
rem 参考根元素html的字体大小
%