css知识点整理

1.选择器

id选择器

<div id="div1">123</div>  

#div1{background-color: #00BCF5;}

class选择器

 <div class="demo demo1">123</div>

.demo{   background-color:blue;} 

.demo1{ color: #ff4400;}

标签选择器

<div>123</div>

div{
    background-color: #3CD5FF;
}

 

通配符选择器   *

父子选择器（自右向左的顺序查找）

<div>
    <span>1</span>
</div>

 

div span{background-color: red}

直接子元素选择器

<div>
    <span>1</span>
    <strong>
        <span>2</span>
    </strong>
</div>

div > span{background-color: red}

并列选择器（可加多个限制范围    标签选择器放在最前面！）

<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

div.demo{background-color: red}

分组选择器

<em>1</em>
<strong>2</strong>
<span>3</span>

em,
span,
strong{background-color: red}

<div class="demo1"></div>
<div class="demo2"></div>

.demo1{background-color: red}
.demo2{background-color: blue}
.demo1,
.demo2{
    width: 100px;
    height: 100px;
}

属性选择器

<div id="div2">123</div>
<div id="div3">123</div>

[id]{
    background-color:yellow;
}

 

优先级：

！important(加在属性后面)>行间样式>id>class|属性>标签>通配符

*CSS权重（256进制）（权重一样时 后面代码覆盖前面代码）

 

！important    Infinity

 

行间样式          1000

id                     100

class|属性|伪类  10

标签|伪元素         1

通配符                0

 

定位（position）

1.absolute（绝对定位）：脱离原来位置进行定位（层级）  相对于最近的有定位的父级进行定位，如果没有，相对于文档进行定位

2.relative（相对定位）：保留原来位置进行定位（层级）相对于本身原来的位置进行定位   （relative一般作为参照物）

3.fixed（固定定位）