Note-Day04

Day04 Css选择器与权重比较

一、Css选择器

上一章节已经讲解过了Css基础选择器。这一次我们将继续讲CSS的其他选择器。

1. 后代选择器 div p
2. 交集选择器 div.d1
3. 并集选择器 div,p
4. 子元素选择器 div>p
5. 序列选择器 ul li:first-child、 ul:li:last-child
6. 相邻兄弟选择器 div + p
7. 普通兄弟选择器 div ~ p

---

后代选择器选中标签所有后代：

    /*后代选择器*/
    .c1 span{
        color: pink;
    }  

交集选择器选中两个集合（类、标签、某id）的交集部分，并集选择器则是选中两个集合的并集部分：

    /*交集选择器*/
    div.c2 {
        color:purple;
    }
    /*并集选择器*/
    .c3,.c4,.c5{
        color: yellow;
    }  

子元素选择器是针对后代中的某一子元素进行选择，是具体的某一元素：

    /*子元素选择器*/
    #id2>em {
        color:brown;
    }

序列选择器是针对序列中的第一元素和最后一个元素进行选择：

    /*序列选择器*/
    ul li:first-child{
        color: pink;
    }
    ul li:last-child {
        color: blue;
    }

普通兄弟选择器就是对同一级别的标签进行选择，而相邻选择器则是紧扣相邻两字对相邻的兄弟进行选择：

    /*普通兄弟选择器*/
    div ~ p {
        color: red;
    }
    /*相邻兄弟选择器*/
    div + p {
        color: grey;
    }

自己敲代码进行验证是最稳妥的。

权重比较

层叠解决的是css冲突的问题。

比较权重来解决层叠问题。
Css中的权重比较主要遵循的规则如下图所示：

当选中内容比较权重时按照id>class>html的原则进行比较。当碰到!important时，它能够把”单独属性”的权重变为无限大。使用需谨慎。

行内元素与块级元素

常见的块级元素：div 块级元素
常见的行内元素：span 行内元素

块级元素和行内元素的区别：

1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。

2. 块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。

3. 如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。

块级元素和行内元素之间的转换利用 ：display: inline block inlin-block