CSS笔记 | 青训营

复合选择器

后代选择器：

<style>
    div span {
        color: red;
    }
</style>

<div>
    <span>这是div的儿子<span>
</div>

子代选择器：

<style>
    div > span {
        color: red;
    }
</style>

<div>
    <span>这是div里面的soan</span>
    <p>
        <span>这是div里p中的span</span>
    </p>
</div>

并集选择器
交集选择器：选中同时满足多个条件的元素
选择器1选择器2

<style>
    p.box {
        color: red;
    }
</style>

<p class="box">p标签，使用了类选择器box</p>

伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停：

a:hover {
    color: red;
}

伪类-超链接：
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时

CSS优先级

通配符选择器<标签选择器<类选择器< id选择器<行内样式<!important

背景属性

背景色          background-color
背景图          background-image ulr("")
背景图平铺方式   background-repeat 
                                    no-repeat
                                    repeat
                                    repeat-x
                                    repeat-y
背景图位置       background-position
背景图缩放       background-size
                                    cover
                                    contain
背景图固定       background-attachment
                                    fixed
背景复合属性     bacground