前端第三天

复合选择器

后代选择器

元素1 元素2{}   元素1和元素2空格隔开  一层一层往下

元素2是元素1的子级或者孙，最终选择的是元素2

例：ol li a{color：red}把 ol的li的a变色

子选择器

只能选择作为某元素最近一级子元素

元素1>元素2{}

元素2只能是元素1的子，最终选择的是元素2  

并集选择器

元素1,元素2{}   一般竖着写，最后一个不要加逗号

伪类选择器

静态伪类：:link超链接点击之前  :visited超链接被访问之后

动态伪类：:hover 悬停，鼠标放到标签上的时候

:active“激活”： 鼠标点击标签，但是不松手时。

focus伪类选择器：谁获得光标，谁就有样式

input:focus{}

元素显示模式

元素以什么方式进行显示，比如div独占一行，span一行多个

一般分为块元素和行内元素

块元素独占一行，高度宽度外边距内边距都可以控制,宽度默认百分百

常见的块元素:<h1>、<p>、<ul>、<ol>、<div>、<li>

行内元素：相邻元素可以在同一行，一行多个

常见有<a>、<strong>、<b>、<span>、<em>等

宽度高度直接设置无效，默认宽度是内容宽度

行内块元素：和相邻内元素在同一行，之间有空隙，一行显示多个

默认宽度为内容宽度 高度，行高外边距内边距都可以控制

显示模式转换

display:block

display:inline

display:inline-block

背景

background-color:   background-image:url（图片位置） 将图像设置为背景

background-repeat:no -repeat（背景图片是否重复，如何重复）

no-repeat 不要平铺  repeat-x横向平铺

background-position:center top;设置图片在容器中的位置

background-attachment：属性有 fixed（背景被固定，不会被滚动条拖走），scroll（不会被固定）

background综合属性:可以把多个属性写在一起

例  background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于   background-color:red;
              background-image:url(1.jpg);
              background-repeat:no-repeat;
              background-position:100px 100px;
              background-attachment:fixed;

background-size 背景尺寸  可以加宽高具体数值  cover  填满容器  contain  图片完整的显示在容器中

background-origin 控制背景从什么地方开始显示  

属性:padding-box（默认）内边距开始显示  border-box 边框开始显示 content-box内容开始显示

background-clip 设置元素的背景是否延伸到边框下面

背景色半透明:backgroud:rgba(0,0,0,0.3)

CSS三大特性

层叠性，继承性，优先级

层叠:覆盖 优先级:ID选择器>类选择器>标签选择器

当优先级一样时，就近原则

继承性：给比如给div增加红色属性，然后div里的子标签<p>也增加了红色属性。

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。关于盒子、定位、布局的属性，都不能继承。

行高的继承:

行高可以跟单位或不跟单位，如果不跟单位，那么行高就是这个数字乘当前元素文字大小

权重叠加

不管父元素权重多高，子元素得到的权重都是0

复合选择器有权重叠加 ，永远不会有进位