这是我参与「第四届青训营」笔记创作活动的的第2天

1.CSS概念和基本语法

cascading style sheets层叠样式表，简称为CSS。

CSS在页面中负责样式这一块，用来定义页面元素的样式，比如设置字体和颜色、位置和大小、添加动画效果等。

    css的基本语法：
        选择器 声明块

        选择器：通过选择器选中页面中的指定元素
            比如 p 的作用就是选中页面中的所有p元素

        声明块：通过声明块来指定要为元素设置的样式
            声明块由一个一个的声明组成

            声明是一个名值对结构
                一个样式对应一个样式值，名和值之间用冒号"："连接，以分号"；"结尾
                （最后一个声明的分号可以不写）

h1{//h1是选择器Selector
color:white;//选择器Property：属性值Value；
font-size:14px;//声明Declaration
}

2.3种常见CSS使用方法

外链（更推荐，内容和样式分离）：把css内容放在单独的文件里面然后用link标签把它引入到页面里面

嵌入：把设置样式的代码直接放在head标签里面

内联（比较不推荐，不够灵活）：将样式直接写在该标签的style属性里面

3.css是如何工作的？

4.选择器

1°常用选择器

元素选择器

作用：根据标签名来选中指定的元素

语法：标签名（）

    p{
        color: red;
    }
    h1{
        color: red;
    }

id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值（）

    #red{
        color: red;
    }
    <p id="red">我是内容</p>

类选择器

作用：根据元素的class属性值选中一组元素

语法：.class属性值

    .blue{
        color: blue;
    }
    <h1 class="blue">我是标题</h1>

通配选择器

作用：选中页面中的所有元素

语法：*

     *{
        color: red;
     }

2°复合选择器

交集选择器

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3选择器n{}

注意：交集选择器中如果有元素选择器，必须使用元素选择器开头，如p.red{}

     .a.b.c{
        color: blue;
     }

选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器n{}

     h1,span{
        color: green;
     }

3°关系选择器

    <!-- 
        父子：
            父元素：直接包含子元素的元素叫做父元素
            子元素：直接被父元素包含的元素是子元素
        祖先元素
                -直接或间接包含后代元素的元素叫做祖先元素
                -一个元素的父元素也是祖先元素
        后代元素
                -直接或间接被祖先元素包含的元素叫做后代元素
                -子元素也是后代元素
        兄弟元素
                - 拥有相同父元素的元素是兄弟元素
     -->
    <div class="box">
        我是第一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span元素</span>
        </p>
        <div></div>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
    </div>
    <span>我是div外的span</span>

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素

    div.box>span{
        color: red;
    }

后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先后代

     div span{
        color: red;
    }

选择下一个兄弟

语法：前一个+后一个（p + span表示选择p后面的那个span（必须紧跟着的才行））

     p + span{
        color: red;
    }

选择下边所有的兄弟

语法：兄 ~ 弟

    p ~ span{
        color: green;
    }

4°属性选择器

语法：

[属性名]选择含有指定属性的元素

[属性名=属性值]选择含有指定属性和属性值的元素

[属性名^=属性值]选择属性值以指定值开头的元素

[属性名$=属性值]选择属性值以指定值结尾的元素

[属性名*=属性值]选择属性值中含有某值的元素的元素

    <p title="abc">A</p>
    <p title="abcdef">B</p>
    <p title="helloabc">C</p>
    <p >D</p>

    /* p[title]{ */
    //此时只有D没有被选中
    /* p[title=abc]{ */
    //此时只有A被选中
    /* p[title^=abc]{ */
    //此时AB被选中
    /* p[title$=abc]{ */
    //此时AC被选中
    p[title*=abc]{
    //此时ABC都被选中
        color: orange;
    }

5°伪类选择器

伪类（不存在的类，特殊的类）

伪类用来描述一个元素的特殊状态，比如，第一个子元素，被点击的元素，鼠标移入的元素...

伪类一般情况下都是使用：开头（一个冒号），例如：

：first-child第一个子元素
：last-child最后一个子元素
：nth-child（）选中第n个子元素
- 特殊值：
- n 第n个 n的范围0到正无穷
- 2n 或 even 表示选中偶数位的元素
- 2n+1 或 odd 表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序

：first-of-type
：last-of-type
：nth-of-type（）

这几个伪类的功能和上述类似，不同点是他们的是在同类型的元素中进行排序

6°伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）

伪元素使用::开头（两个冒号）

::first-letter表示首字母
::first-line表示第一行
::selection表示选中的内容
::before 元素的开始
::after 元素的最后

before和after要结合content属性使用

CSS简介及选择器的应用 ｜ 青训营笔记