【Html】04-CSS选择器

组合选择器

1.后代选择器

<style>
    #box .list li .hello{
        font-size:20px;    
    }
</style>

2.子元素选择器（表示符号：>）

<style>
    #box > .boy{
        color:blue;
    }
    #box > .foot > .fruit{
        color:purple;
    }
</style>

3.兄弟选择器（表示符号：~）

表示选择 li 后面所有class="boy"的同级元素(选择邻近的所有后者前者不选择)

<style>
    .list > li ~ .boy{
        font-size:30px;
        color:blue;
    }
</style>

4.毗邻选择器（表示符号：+）

表示选择 前者为class="boy"且后者刚好是 li 的所有 li 元素

<style>
    .boy + li{
        color：skyblue；
    }
</style>

5.并集选择器（表示符号：,）

<style>
    .girl , .teacher{
        background-color:pink;
    }
</style>

6.在这一类型里面的并且有这个名字的

<style>
    .foot p.candy{
        color:purple;
    }
</style>

html标签：

​ 1 按照写法分为：单双标签；
​ 2 按照排列顺序：块级标签和行内标签；

块级标签:

div p ul li dl h系列等等的标签
特点：独占一行

行内标签：

span em i b
特点：横排显示，在同一行显示

盒模型：

1.content（内容）

​ width（宽度）/height（高度）

2.padding（内边距）

​ 特点：

​ a.会撑大盒子

​ b. padding区域的颜色和内容去的颜色保持一致；

​ c. padding的作用：设置盒子边框和内容区的距离；

padding的写法：

分样式：

padding-top：	上内边距
padding-bottom：	下内边距
padding-left：	左内边距
padding-right：	右内边距

复合样式：

padding：20px；	（上=右=下=左=20px）
padding：20px 30px；	（上=下=20px 左=右=30px）
padding：20px 30px 40px；	（上 =20px 左=右30px 下=40px）
padding：20px 30px 40px 50px；	（上=20px 右=30px 下=40px 左=50px）

3.border （边框线）

<style>
    div{
        border：30px solid pink;
    }
</style>

属性	属性值说明
30px	边框大小，{未注时，默认给3px【屏幕为100%大小时】}
solid	边框样式（必须有）
pink	边框颜色，{未注时，颜色默认为内容字体的颜色。}

分样式：

border-width：边框线大小

​ border-width：30px；（上右下左30px）

border-style：边框线样式

​ solid：实线

​ dashed：虚线

​ dotted：点线

​ double：双实线

border-color：边框线颜色

transparent（透明色）

单个边框的复合样式：

​ border-top：30px solid purple；

​ border-bottom：下边框

​ border-left：左边框

​ border-right：右边框

^ :{ border-right：none；删除右边框 }

单个边框的分样式：

​ border-top：

​ border-top-width：

​ border-top-style：

​ border-top-color：

---

END