一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情

我走得很慢，但我从来不会后退。 ------林肯

选择器

后代选择器

ol li(选择ol里面的li)

子选择器

ol>li（选择亲儿子）

链接伪类选择器

a:link	把未访问过的链接选出来
a:visited	把访问过的链接选出来
a:hover	当鼠标经过，选择此链接
a:active	选择的是鼠标正在按下还没有弹起的链接

ps:在开发中通常按照lvha的顺序来写

focus伪类选择器

input:focus{}（点击获取光标，一般情况下input才使用）

背景图片

插入图片：background-image: url()

背景不平铺：background-repeat: no-repeat

ps:如果不设置背景平铺，效果将会是这样👇

添加了no-repeat后👇

body{
            background-image: url(pic/01.jpg);
            background-repeat: no-repeat;
        }

沿着x/y轴平铺:background-repeat: repeat-x/y

背景图片的位置：background-position: x(x坐标)/y(y坐标)

ps: x,y坐标也可以写精确坐标mpx或者方位名词（center,top,right,bottom）小的装饰图片一般用背景图片来做 也可以添加混合单位

背景图像固定

background-attachment: scroll（滚动）/fixed（固定）

背景图像复合属性

background: black url() no-repeat fixed top

背景颜色半透明

background: rgba(0,0,0,0.3)（a是透明度）

边框

属性及其作用

属性	作用
border-width	边框粗细
border-style(solid dashed（虚线） dotted（点线）	样式
border-color	颜色

边框复合写法

在开发中我们通常使用复合写法

border: 1px solid blue

border-collapse: collapse相邻边被合并

ps:边框会影响盒子的大小（添加边框盒子会变大）

内边距

padding-top/bottom/right/leftpadding是内容与盒子的距离 复合属性具体如下🧚‍♀️

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5像素内边距
padding: 5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距是5像素，左右内边距是10像素，下边距是20像素
padding: 5px 10px 20px 30px;	4个值，上下左右分别是5像素，10像素，20像素，30像素，顺时针

补充

显示模式的转换

块元素转换为行内元素inline

行内块元素inline-block

display: inline;
display: inline-block;

css的层叠性

层叠性：后来居上（覆盖）

继承性：给div添加文字样式，其中的子元素也会继承父元素的css

优先级

选择器	权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式style	1,0,0,0
!important	无穷大

权重叠加（只针对设置同一个属性）

ul li{
    color: green;
}
li{
    color: pink;
}

上面的权重为2，大于下面的权重1

总结：选择器在开发当中用的很多，尤其是元素选择器和类选择器以及id选择器，需要熟记其用法，在我们使用盒子时要注意边框和内边距对盒子的影响，还有对于背景图片经常将平铺设置为no-repeat,这些都要记住哦。

辛苦掘金的运营小同学啦！🥰

咱们明天见！👀👀